How to change navbar/container width? Bootstrap 3

Question

The default width for my navbar is too wide 1170px. I would like to reduce it down to 940px - but I want to keep the responsiveness.

I tried to change the container width in CSS and it looks ok with a large browser, but the rest of the page falls apart when viewing for mobile sizes.

Is this the correct property or is there something else?

@media (min-width: 1200px) {   .container {   max-width: 1170px; } 

Here is my navbar code

<div class="navbar navbar-inverse navbar-fixed-top">       <div class="container">         <div class="navbar-header">           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>            </button>           <a class="navbar-brand" href="#">Site Name</a>         </div>          <div class="collapse navbar-collapse">            <ul class="nav navbar-nav navbar-right">             <li class="active"><a href="#shop">Shop</a></li>             <li><a href="#showcase">Showcase</a></li>             <li><a href="#help">Help</a></li>             <li><a href="#my account">My Account</a></li>             <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li>           </ul>         </div><!--/.nav-collapse -->       </div>   </div> 

Answer 1

I just solved this issue myself. You were on the right track.

@media (min-width: 1200px) {     .container{         max-width: 970px;     } } 

Here we say: On viewports 1200px or larger - set container max-width to 970px. This will overwrite the standard class that currently sets max-width to 1170px for that range.

NOTE: Make sure you include this AFTER the bootstrap.css stuff (everyone has made this little mistake in the past).

Hope this helps.. good luck!

Answer 2

Container widths will drop down to 940 pixels for viewports less than 992 pixels. If you really don’t want containers larger than 940 pixels wide, then go to the Bootstrap customize page, and set @container-lg-desktop to either @container-desktop or hard-coded 940px.