Creating a third level dropdown menu for NationBuilder sites using Bootstrap 4

NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Get the code

Relevant files

1. _nav_mobile.html

2. _nav_desktop.html

3. _styles_mobile.scss

4. _styles_desktop.scss

The problem

With Bootstrap 4 it is not quite as easy to add a multilevel dropdown to the top navigation, as the “dropdown-menu” is a <div> element with an <a> link inside, where that <a> can’t contain other links within it. For the third level we mostly will need to create it inside the second level “dropdown-item(s)” to “absolute” position the new “dropdown-submenu” on each of the children of the second level. So the sub “dropdown-menu” must come with a “position:absolute;”, “top:0;”, and positioned just at the right side of its parents in the second level, but this can’t be done within <a> links.

In Bootstrap 3 the “dropdown-menu” used to be a <ul> item, inside another <li> inside another <ul> list of items, which made it possible to create another sub “dropdown-menu” inside the final <li> element without being directly inside the <a>.

Solution

To make a third level of navigation possible with Bootstrap 4, we we will make a couple of changes in the HTML and some styling, creating some new <ul>, <li>, and <a> elements.

We will first be creating the “dropdown-item(s)” as a new unordered list (<ul>) with class “dropdown-item-ul”, then <li> elements with class “dropdown-item-li” which will contain the “dropdown-submenu” (or the 3rd level nav) and an <a> element with class “dropdown-item-a”.

Note

This is an example solution based on the liquid programming language as applied to NationBuilder pages. However, the idea is the same for any Bootstrap 4 nav.

Now let’s get started!

Step 1

Download the two HTML files and use them to replace the Bootstrap 4 default “nav.html”. You will need to replace the

{% include "nav" %}

liquid line of code with the below two lines within the “layout.html” file.

{% include "nav_mobile" %}
{% include "nav_desktop" %}

Step 2

Download the two SCSS files in Github, copy the styles into your own stylesheets or attach the provided “.scss” stylesheets directly to your site through the “theme.scss” file, adding the lines of code as below.

@import "styles_mobile";
@import "styles_desktop";

Step 3

The nav will look similar to the example image below for, but with some colour differences. Edit the styles for any changes, removing the hover border bottom, create different hover effects, adapt a logo or remove the :last-child styles for the last item in the nav.

This is a base that works from desktop to mobile with some effects, some default styles and colors and applying some Bootstrap 4 classes too - changes can also be made to the HTML or SCSS.

Get the code