Some of my top nav menu items are meant only as a means for opening the menu of subpages -- they are not intended to be pages themselves. Some have no subpages (e.g. "Home", "Blog", and "Donate"), and so should be links to only that top nav page -- just as they right now. But for the REST of the top nav items that DO have subpages ("Who We Are", "Our Work", "Take Action", and "Newsroom"), I don't want someone to be able to go to a page for the top item itself.
I suppose this could be done by changing the link URL for those top nav items with subpages to a #. But programmatically, how would I achieve this?
Dan,
the easiest way to solve this without editing the code would be to use a redirect page-type as the parent, and have that redirect to whatever page you deem appropriate. Putting a # as the link to a top nav parent is generally not good for SEO. Indexing robots are not able to easily crawl all of those pages, so this is not a feature we are currently considering for development.
If you want to edit the code, there are a couple of ways to do it. It's important to keep in mind that editing the code to target specific items will remove some of the dynamic functionality that the top nav bar currently has, like being able to rename them, or move them around.
1. To make all top nav items in your navigation un-clickable, you could add custom CSS to your tablet-and-desktop.scss file and then target the href link in your _nav.html file.
You would add the following CSS to the the very bottom of your tablet-and-desktop.scss template:.not-active {
pointer-events: none;
cursor: default;
}
Then, you'd add the corresponding class to the href on line 11 of the _nav.html file. The resulting line of code should look something like this: <a href="{{ child.url }}" class="not-active">{{ child.name }} <i class="icon-angle-down"></i></a>
2. You could target the first/last item in a forloop. Here is an example of how to do that: http://nationbuilder.com/kempas/new_window_for_redirect_pages
3. You could target each item in the array, by using the index # Like:
{% if forloop.index == 1 %}
content for first nav item
{% elsif forloop.index == 2 %}
content for second nav item
{%endif %}
4. You could hardcode the navigation.
Richir Outreach has a walkthrough on how to edit individual nav items, and on how to work with forloops in liquid that may be helpful.
Showing 10 reactions
Sign in with
Would still like to know how exactly to use the redirect option for this issue.
“Redirect: Create a link on your NationBuilder site that simply leads to another page or an entirely different website (with another URL). Redirects can also be created under Pages > Legacy > New redirect.”
Since there isn’t enough detail, I can’t use this preferred option. Joshua Canter’s explanation for changing the code is thoroughly detailed and I will try that option next.
I was able to achieve this on my nation by editing the code. And actually not that hard!
1. You first new to create a new custom theme. Navigate to Website Settings and click Theme. Than click New custom theme. Name it whatever you want, and make sure “clone your current theme” and “switch site to your new site theme immediately” are checked.
2. Now navigate back to Theme under Site Settings. But this time click Templates.
2. Scroll down to the Include section and click _nav.html labeled Top Nav. Delete href=“{{ child.url }}” from line 10. This makes the top link of a parent drop down unclickable.
3. Back on the Templates page, click _breadcrumbs.html under the Included section again. This time delete line 29, 30, 31. That removes the parent button from all subpages.
The only catch is that it’s all or nothing. If you have multiple drop down pages with subpages, they all go away.
Hope that helps,
Josh Canter
http://www.thecantercompany.com/