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;   } }