Link personalizzati di navigazione superiore

Componente del tema
,
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 Mi Piace
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 Mi Piace
76

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

3 Mi Piace
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 Mi Piace
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 Mi Piace
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 Mi Piace
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?

86

I’ve put in a bug report for this TC:

This really quite ruins the functionality; if it isn’t going to be addressed, perhaps this should be tagged broken?

4 Mi Piace
87

Suggestion: include icons as an option. I used emojis and it looks really stylish, but it breaks on mobile and obviously isn’t consistent

Screenshot at 2025-07-27 21-14-38
Screenshot at 2025-07-27 21-14-381056×141 14.2 KB

88

There is a component which allows you to add icons to the links in the top navigation: Discourse Nav Item Icon / Emoji
and it also works with custom links added by this component. The only difference is that you need to add custom_ in front of the name of the nav item.

For example,
I added a “Preferences” link with the help of this component: Preferences;edit your preferences;/my/preferences

Configuration of "nav links" setting: "Preferences;edit your preferences;/my/preferences"
Configuration of "nav links" setting: "Preferences;edit your preferences;/my/preferences"910×255 8.94 KB

And then I configured the icon/emoji component to add the wrench icon: icon:custom_preferences:solid:wrench:currentColor

Configuration of the "Nav item prefix" setting: "icon:custom_preferences:solid:wrench:currentColor"
Configuration of the "Nav item prefix" setting: "icon:custom_preferences:solid:wrench:currentColor"912×306 8.92 KB

Result:
image

1 Mi Piace