css - Styling and collapsing with Bootstrap -
i'm going crazy styling predifined bootstrap classes. first of all, i've got problems access icon-bar class, doesn't styled. second of all, when shrinking browser, navigation bar collapses @ point before that, it's rearranged in 2 rows (brand continues in place menu gets second row). want collapsed when there's no space both menu , brand coexist in same row.
how can 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 { { color: white;} .navbar-toggle .icon-bar { color: red;} } #menu ul li a{ color: gainsboro; } }