Custom Top Navigation Links

Theme component
,
74

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.

3 Likes
75

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
76

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

3 Likes
77

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
78

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
79

That looks like magic.

80

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

image
image1444×302 25.2 KB

81

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

1 Like
82

Hello Guys,

Is there a way to display the link on mobile please?

Thanks!

83

Hi there, are you referring to the full links instead of the dropdown on mobile?
If so, there isn’t much space on mobile to have the links. The dropdown compacts it as one.

84

Hi,

Thank you for your quick reply!

Sorry I should have played more with the settings it does not appear on mobile because I have checked Hide the default links on both mobile and desktop.

How can I hide these default links and still display my links on mobile please?