How to make a dropdown in nodebb navigation?
@Jey-Cee-0 @Evgeniy-Onegin We were able to do it via this technique.
Take the markup and css for the Secondary Nav menu https://codepen.io/kuus/pen/MwXzNm
Place it in the Global Widgets as an HTML widget.
This way you'll not be changing templates and can get the benefits of the new updates in the theme.
@fais3000 Sorry for digging up an old thread, but I'm curious to know if adding a dropdown into the stock header bar supplied with NodeBB is possible ? The real issue here is the limitation of screen estate on some devices, and having sub items in a dropdown would be a good way to combat this.
@phenomlab No worries, this is still a pain point for me.
I have been using above technique on a couple of forums via widgets but it is not ideal. It works well for desktops and larger screens but for mobile we have to push the secondary menu items into the top default menu (stock menu) via JS due to the real estate issue. So yes it is possible, but not ideal as it doesn't load sometimes for mobile users if there is a js error in any of the third party services (like ads).
I also tried updating the stock header via persona tpl files, but i've been burned as the theme structure updates frequently with new releases. I've learned to avoid overwriting the templates.
The best approach would be to have this ability in the core to handle either multi level navigation or a better responsive setup which can hold relatively larger number of menu items.
Mega menus are pretty common in majority of websites these days and if nodebb team supports them it would solve the issue. e.g https://geedmo.github.io/yamm3/
@phenomlab looking for something similar myself.
This will be available in our next release. https://github.com/NodeBB/NodeBB/issues/9967
Yeah that would happen on mongodb because of the way the navigation items are stored(They are stored as json strings in a sorted set). We will have to refactor it to store in proper hashes. https://github.com/NodeBB/NodeBB/issues/10077
@baris said in dropdown in navigation?:
This will be available in our next release. https://github.com/NodeBB/NodeBB/issues/9967
Hi @baris , is there any way to re-group several navigation items into one as a dropdown menu while maintaining their visibility settings?
we have several plugins that use navigation bar such as:
/map
/calendar
/feed
/glossary
(some are for registered users only and opens in a new window)
So, the navigation bar is getting crowded, I wonder if there is any way to implement this?
No built in way to do it. But you can control the visibility of the dropdown menu items via custom css.
Here is a sample dropdown that shows an item for logged in users and a different item for guests.
<li class="loggedin"><a href="https://somelink.com">visible to logged in users</a></li>
<li class="guest"><a href="https://otherlink.com">visible to guests</a></li>
Once you create a dropdown like that you can control the visibility via custom css. The body element is given a class based on the user's logged in status. user-loggedin if they are logged in and user-guest if they are logged out.
So in your custom css you can use those classes.
#main-nav .dropdown-menu .loggedin, #main-nav .dropdown-menu .guest {
display: none;
}
body.user-loggedin #main-nav .dropdown-menu .loggedin {
display: block;
}
body.user-guest #main-nav .dropdown-menu .guest {
display: block;
}
@baris thanks 
this code should do the job.
