• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Best Way to Customize the Navbar?

Scheduled Pinned Locked Moved NodeBB Development
navbarcustomize
10 Posts 5 Posters 1.6k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • djensen47D Offline
    djensen47D Offline
    Dave Jensen
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
  • barisB Offline
    barisB Offline
    <baris> NodeBB
    wrote on last edited by
    #2

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

    1 Reply Last reply
    0
  • djensen47D Offline
    djensen47D Offline
    Dave Jensen
    wrote on last edited by
    #3

    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?

    1 Reply Last reply
    0
  • barisB Offline
    barisB Offline
    <baris> NodeBB
    wrote on last edited by baris
    #4

    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.

    djensen47D 1 Reply Last reply
    1
  • djensen47D Offline
    djensen47D Offline
    Dave Jensen
    replied to <baris> on last edited by
    #5

    @baris Thanks!

    1 Reply Last reply
    0
  • E Offline
    E Offline
    Enrique
    wrote on last edited by
    #6

    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).

    barisB 1 Reply Last reply
    0
  • barisB Offline
    barisB Offline
    <baris> NodeBB
    replied to Enrique on last edited by
    #7

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

    1 Reply Last reply
    0
  • barisB Offline
    barisB Offline
    <baris> NodeBB
    wrote on last edited by
    #8

    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.

    1 Reply Last reply
    0
  • A Offline
    A Offline
    alfazaz
    wrote on last edited by
    #9

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

    1 Reply Last reply
    0
  • Sabeel IjazS Offline
    Sabeel IjazS Offline
    Sabeel Ijaz
    wrote on last edited by
    #10

    On ACP

    • goto Appearance tab

    • add custom javascript like in following example.
      Custom Navbar

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development