The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Using 2 Bootstrap Navbars on a site (stacked), can I change the color of one for each page?
Hi, CSS newb here, apologies.
Currently using Twitter Bootstrap. As title says, want to create a layout with two fixed nav bars stacked on top of each other
Aim is for the ‘top’ nav bar’s color to stay constant whilst navigating, and the bottom nav bar to change color for almost every page.
Is there an ‘easy’ way to do this?
I’ve thought of one way to do it:
1: Copy all the .navbar-inverse CSS code, modify it for each color, then write an IF statement within the page template to insert the applicable CSS class into:
div class=”navbar navbar-inverse navbar-fixed-top”
Replacing navbar-inverse with the new color class, depending on which page is being displayed.
However this violates the DRY principle – so I’m hopeful there’s a much simpler method!
Are you using any type of CMS?
No, not currently.
Depending on how large the site is going to be, I’d recommend it.
If pages are being created statically, I’d just add a class to the body.