Best Way to Customize the Navbar?

Dave Jensen

Are there any built in ways to customize the navbar?

I've considered modifying the CSS but that only gets me about 80% of what I would like.

Are there plugins?

Or should I just fork Persona and build my own theme?

<baris>

What is the other 20%? You could make a child theme of persona and only modify the navigation.

Dave Jensen

I kinda want to re-write the navbar using flexbox. Though I still might be able to do that by modifying the css.

I also want it double high (about 100px) by default. Etc.

What's a child theme?

<baris>

A child theme is just a regular theme with baseTheme defined in theme.json for example https://github.com/NodeBB/nodebb-theme-lavender/blob/master/theme.json#L7.

Then you can add template files you wish to customize and everything else will come from the baseTheme.

Dave Jensen

@baris Thanks!

Enrique

I'm trying to accomplish something very similar, I've created my subTheme based the Vanilla theme and created a custom menu.tpl and it works, but I'm unable to find where I can set the {navigation.class} I've looked at General > Navigation, but I haven't seen where can I set this.
I'm trying to create a menu with dropdowns based on my main site(a wordpress site).

<baris>

@Enrique Seems like {navigation.class} is not set anywhere can you open an issue on our github tracker please.

<baris>

It just gets active class when you navigate to one of the items. You could potentially set it in a plugin when the header is being rendered.

alfazaz

@Enrique Did you succeeded in making a dropdown menu ? If yes, how did you do ? Thanks !

Sabeel Ijaz

On ACP

goto Appearance tab
add custom javascript like in following example.
Custom Navbar