Custom Top Navigation Links

Thanks for the additional detail! It was indeed some fragile CSS. We have class names here where there formerly were none, so we can be more specific now.

I’ve refactored the component a bit here:

So all it will need is an update.

I’ve updated this so hide default links will hide all the default links, not just latest & categories. I think this will make the hide behavior a little easier to understand.

Nav items added by this component will now get a nav-item_custom_item-name class, where item-name is the display name of the nav item (spaces replaced with hyphens). So a nav item named “my bookmarks” can be targeted with CSS like this:

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue; 
   }
}

Default items have a class name like nav-item_name, so if you want to hide the default categories link you can do:

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

This should get the active class now.

2 Likes

Hi,

The latest update changes the nav link display text to lowercase and adds extra dashes.

We have the following in the nav link field:

⮉ Home;show all categories;/forums

The nav link shows up as follows:
image

Previously it was showed as: ⮉ Home

This line appears to be the culprit:

2 Likes

thanks for mentioning it, I just made a minor update that fixes this!

3 Likes

Given that we’re in wildest dream territory here—thank you so much for these fixes @awesomerobot!—a useful addition to this component would be an option to make the custom nav appear before the category and tag dropdowns, is that possible (without loads of work)?!

1 Like

You can do this with some CSS added to a theme:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 Likes

That looks like magic.

Hello,
How can i setup URL in Nav canbe open in new tab?
Thank you!

This is not possible from the plugin, you need to add custom javascript for this.

1 Like