Styling and collapsing with Bootstrap - css

Question

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