Skip to main content

Removing Top Nav Link for items w/sub pages

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?

Official response from

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.

Share this post

Showing 10 reactions

Please check your e-mail for a link to activate your account.