Forums

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?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #39890
    jking
    Member

    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!

    #110221
    TheDoc
    Member

    Are you using any type of CMS?

    #110226
    jking
    Member

    No, not currently.

    #110227
    TheDoc
    Member

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.