0

I'm going crazy styling predifined bootstrap classes. First of all, I've got problems to access the icon-bar class, it doesn't get styled. Second of all, when shrinking the browser, the navigation bar collapses at some point but before that, it's rearranged in two rows (BRAND continues in its place but the menu gets to a second row). I want it to get collapsed when there's no space for both the menu and the brand to coexist in the same row.

How can I solve this?

HTML

<header id="header-bar" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
        <span class="icon-bar"></span> <!-- Not Styled -->
        <span class="icon-bar"></span> <!-- Not Styled -->
        <span class="icon-bar"></span> <!-- Not Styled -->
      </button>
      <a class="navbar-brand" href="#">BRAND</a> <!-- STYLED -->
    </div>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="nav navbar-nav">
        <li><a class="options" href="#">AAAAAAAAA</a></li>
        <li><a class="options" href="#">BBBBBBBBB</a></li>
        <li><a class="options" href="#">CCCCCCCCC</a></li>
        <li><a class="options" href="#">DDDDDDDDD</a></li>
        <li><a class="options" href="#">EEEEEEEEE</a></li>
        <li><a class="options" href="#">FFFFFFFFF</a></li>
        <li><a class="options" href="#">GGGGGGGGG</a></li>
        <li><a class="options" href="#">HHHHHHHHH</a></li>
      </ul>
    </div>
  </div> <!-- Container -->
</header>

CSS

$blue-logo: #4775FF;

header .container-fluid {
  background-color: $blue-logo;
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  max-height: 50px;

  .navbar-header {
    a { color: white;}
    .navbar-toggle .icon-bar { color: red;}
  }

  #menu ul li a{
    color: gainsboro;
  }
}
Fernando
  • 751
  • 2
  • 13
  • 27
  • You will have to decrease the padding of the anchor `.nav>li>a` and also decrease font-size to accommodate in one line – anpsmn Apr 09 '15 at 17:55
  • But I don't get it: with full screen it's displayed correctly but then when resizing it comes a time when the menu gets in 2 rows when it should be collapsed... why it's collapsed so late? the two last list items get to this second row, but no other item. From that point and forth, the button pops up. – Fernando Apr 09 '15 at 18:01
  • And what about styling the icon bars in the button? – Fernando Apr 09 '15 at 18:01
  • It collapses when the screen width becomes lesser than 768px not as soon as the menu goes down. For styling the icon bars use this class `.navbar-default .navbar-toggle .icon-bar` – anpsmn Apr 09 '15 at 18:04
  • You can check this [link](http://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less) for adding custom media query for the collapse – anpsmn Apr 09 '15 at 18:14
  • For the screen, I'm using Bootstrap CDN and it seems for the commets on the link that in Bootstrap 3 the code answered doesn't work but you have to customize bootstrap. I don't know if this can be done without downloading it so I guess i'll remove some options in the menu. – Fernando Apr 09 '15 at 18:41
  • @anpsmn For the styling, not even adding this class can I get it done... – Fernando Apr 09 '15 at 18:43
  • 1
    Yeah if you want customized Bootstrap then you can't use CDN. For the icon bar it works for those classes. See [here](https://jsfiddle.net/pye22zq2/1/) – anpsmn Apr 09 '15 at 18:56

0 Answers0