Parent pages are showing up in their dropdown menus in the mobile nav

Some users have noticed that pages in the top nav with a dropdown (i.e. child pages) are still listing the parent page itself in the dropdown menu even when you uncheck the "Show parent in nav dropdown" checkbox in the Site Settings tab -- but only on mobile. This is expected behavior, but there is a code workaround that you can implement to change this.

Official response from

While the "Show parent pages in nav" checkbox works for the desktop version of your site, it is not designed to work on the mobile version of your NationBuilder website because of how the functionality of the navigation changes on touch-screen devices. Specifically, on desktop, hovering over a parent button that has child pages will reveal the dropdown menu with the child pages and clicking on the parent button will take you to that page. On touch-screen mobile devices, however, there is no such thing as "hover" because there is no cursor, so clicking on a parent button reveals the dropdown of child pages. For this reason, the parent page always shows up as an option in the dropdown in order to provide a way to get to that page.

If you are not using these parent pages as actual pages and are instead using them just as "containers" in the top nav, you can make a change to the "_nav.html" file in your website's custom theme so that they do not show up in the dropdown menu -- even on mobile. If you'd like this change to apply to ALL pages that have child pages (even pages that you create in the future), you can simply delete line 28 in that file. Depending on what theme you are using, the line number may be different, so be sure to check this before-and-after code comparison to see the line of code that you should delete: https://www.diffchecker.com/5SYzW4DN

If you would rather have this change apply only to certain pages, allowing you to create pages in the future that can have child pages but still be accessible via the mobile nav, you can make the following change to that "_nav.html" file:

https://www.diffchecker.com/ZH5EAJE6

The above example shows how you would edit the "_nav.html" file so that the "about" and "give" pages do not show up in their own dropdown menus but other parent pages that have dropdown menus WILL show up in their dropdown menus.

Complete and current information on how to use NationBuilder is available in the documentation section.

Share this post

Showing 2 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.