Custom Nav bar above NodeBB nav bar

[nodebb789]

Hi,

I'm trying to implement our overall site navigation above the nodebb nav bar. Are there any ideas on how we can do this?

The best example I could find is this site which uses nodebb:
https://forum.vivaldi.net/

Mail / Blog / Community / Forum are external links and then below that is custom nodebb navigation bar. When user shrinks it down to mobile size, the sidebar menu has navigation for both nav bars separated.

Can somebody please guide me on how to do this? I am willing to do some custom development, but don't know where to start.

Thanks.

[crazycells]

We are also trying to do something like this...

Separate lines for main links including forum / blog etc...
and another one below for forum options...

Any help would be appreciated...

[oplik0]

Well, the best way would probably be to just create a new theme with that modification.
If you're modifying Persona the places you should be looking at are:
https://github.com/NodeBB/nodebb-theme-persona/blob/master/templates/header.tpl - this file contains nav elements themselves, but imports their contents. You'll want to either add another nav that'll be below the one for NodeBB menu (you'll need to still change css for it though, sice if you just copy the nav classes you'll end up with one navbar on top of another), or create additional div for the second line and again - change css to make each div span a line.

https://github.com/NodeBB/nodebb-theme-persona/blob/master/templates/partials/menu.tpl
The navbar template itself. You will probably want to move some of the elements from here to the template for second line, or - alternatively - add the second line here instead of doing it in the header.tpl

https://github.com/NodeBB/nodebb-theme-persona/blob/master/templates/partials/slideout-menu.tpl - mobile menu template. If you want to separate sitewide stuff from forum on mobile, do it here.

https://github.com/NodeBB/nodebb-theme-persona/blob/master/less/header.less - less file with styles for header elements

[crazycells]

@oplik0 thanks a lot for the great explanation. I will update the topic later...