CODEWITHSUNDEEP
csstwitter-bootstrap
Ben Swinburne
Ben Swinburne

Reputation: 26467

Style Twitter bootstrap Navigation

How do people typically style the output of the Twitter Bootstrap collapsible navigation?

The standard structure is as follows.

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

For example, if I would like to style .nav li a, I can do so with that CSS selector, but that also then changes the styling of the mobile navigation. Bootstrap doesn't appear to add any useful combination of classes to denote different ones.

<div class="nav-collapse collapse"> <!-- Closed by button -->
<div class="nav-collapse on collapse"> <!-- Open by button -->
<div class="nav-collapse on collapse"> <!-- Closed by resizing window to > mobile -->

I find myself having to effectively implement the bootstrap styles again for the mobile version because I can't seem to find a combination of classes which allows me to style just the main nav rather than the dropdown. For example, the dropdown can be styled with .nav-collapse.on

This is probably a really simple thing to do but can't seem to work it out!

Upvotes: 0

Views: 849

Answers (3)

Joe Trader
Joe Trader

Reputation: 17

The menu is broken into two parts, a structure and a styling. If you remove the styling you are left with a naked bootstrap menu that is easy to style. Remove the "navbar-inner" call and it will strip out all the styling for you. I just rename the call on the menu div from navbar-innner to navbar-inner_OFF. That shuts off the -inner css and also reminds me I rurned it off when I look at the menu code.

Upvotes: 0

Dylan
Dylan

Reputation: 4773

I have delt with this issue myself and there are range of solutions.
In order I would put them something like:

  1. Involved but worth it - I have switched to a workflow that involves building bootstrap. I'm using bootsrap-sass with compass and grunt etc. This handles the task of minifying, concatenating etc, and in this case all the changes you want to the _variables.scss or .less etc..
  2. Cheap But Effective - I have used a very simple hack to just make a second menu and add .hidden-phone, .visible-desktop etc.. This allows you to also make unique touch buttons and maybe forgo collapse. Kinda like they do here (It's not bootstrap but its the same concept)
  3. Media Queries - My last css in the list is always my responsive.scss or a file full of media queries, this way I can change whatever I want to override from anything done before for whichever device.

Upvotes: 1

Steve Ray
Steve Ray

Reputation: 158

Simplest solution would be to wrap the .navbar div for your main nav in a div with a custom class -- like, say, "mainnav". Then you can write styles to things like ".mainnav .nav li a".

If you can touch the bootstrap structure itself, you could skip the wrapper div and simply add the class "mainnav" to the "navbar" div, and then write styles like ".mainnav.navbar .nav li a".

Upvotes: 0

Related Questions