Cameron Cameron - 6 months ago 29
HTML Question

Bootstrap 3 Navbar Elements Stacking - navbar-brand not scaling

I've been trying to get my site's navbar-brand text to be responsive: I want it to get smaller as the screen is resized. Right now, what happens is that my brand text won't change size on mobile. This creates an ugly stacking of the navbar links over the navbar-brand. I've tried putting

@media (max-width: 400px) {
.navbar-brand {
font-size: 14px;
}
}


in my CSS, but to no avail. Is there something simple that I'm missing?

Here's a screenshot, to show you what I mean:

Medium-sized screens

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Sample Company Law Group, Inc.</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="attorneys.html">Attorneys</a>
</li>
<li>
<a href="practice-areas.html">Practice Areas</a>
</li>
<li>
<a href="references.html">References</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>


https://jsfiddle.net/frzbpkjk/

Answer

First, I tested your css and it works. You can see an example working on this link:

http://codepen.io/eMineiro/pen/Kzjymp

<div class="navbar-brand">
  <p>Test</p>
</div>

1) The problem could be on your css code. Check if you have another "font-size" that may be overloading your code.

2) The most easily way to see what is happening is to open you browser developer tools and check what style browser is calling when your media screen is less than 400px

Any example below could override your code:

/* Any media with max-width greater than 400px could override your code  */
@media (max-width: 500px) {  
.navbar-brand {
    font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code  */
@media (min-width: 200px) {  
.navbar-brand {
    font-size: XXpx;
}
}
/* Any media with max-width greater than 400px could override your code  */
@media (max-width: 500px) {  
.navbar-brand {
    font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code and max-width greater than 400px */
@media (min-width: 200px) and (max-width: 500px) {  
.navbar-brand {
    font-size: XXpx;
}
}