In NationBuilder's public themes, the top nav dropdown menus are, by default, one level deep. This how-to outlines the components needed to create a top nav dropdown that's two levels deep.
The navigation structure can be found in the _nav.html partial template in your custom theme's Templates section. In Aware, _nav.html contains the following nav structure:
Note the unordered list with the "sub" class – this is the first (and only) dropdown level. Via liquid, the "sub" element shows the parent element if the "show parent"
option is turned on in the control panel, and also loops through and outputs its children via the "nav_children" attribute. We'll be using the "nav_children" attribute again to print
the second dropdown level:
Within the "sub" dropdown menu, we've now added a "subsub" element to the links in this dropdown that contain at least one "nav_children". This block
loops through and outputs the links of the children pages of the first dropdown's links (in other words, the "nav_children" of the "nav_children"). Parent links
that contain children also have a "drop" class added to them.
So, we now have the contents of the second level dropdowns, but we still need to style these menus and hide them until their parents are hovered over. Dropdowns should
default to the hidden state, and since we know that parents containing children also have a "drop" class, we can design our stylesheet to show the children of a link with the "drop"
class when it's hovered over. The following snippet, when placed in your tablet-and-desktop.scss stylesheet, will style these dropdowns for the Aware theme:
Do you like this page?