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>

Jose Browne · Answer 1 · 2013-09-04T08:36:09.833

55

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!

edited Sep 04 '13 at 08:36

answered Sep 04 '13 at 08:23

Jose Browne

4,482
3
28
29

5

It's also worth mentioning that if you only want to do this on your navbar that you can do so by nesting the snippet above within `.navbar`. – rc_luke Oct 08 '13 at 19:53
1

Also don't forget `.container-fluid` – Richard de Wit Jun 26 '14 at 12:24
How would I do this if I did not want ALL of my containers to abide by this rule? Should I just give it an id and then target that in my CSS file? I'm sure that would work, but I'm curious if it's the 'right way' to do this. – ohhh Oct 29 '14 at 22:45
@ohhh that should work. In my head, a class makes more sense though. – Dec 05 '16 at 00:03

score 2 · Answer 2 · answered Aug 31 '13 at 13:06

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.

answered Aug 31 '13 at 13:06

Martin Bean

38,379
25
128
201

I don't understand. I went to the customize page, changed the "@container-lg-desktop" to 940, downloaded the zip, replaced my bootstrap.css with the new bootstrap css and my page still displays the larger width. – Mark Aug 31 '13 at 13:31
I imagine that’s a bug with the build script then, as the help text states: “Define the maximum width of `.container` for different screen sizes.” – Martin Bean Aug 31 '13 at 13:46
There's has to be something I can do. Many of the sites showcased at the bootstrap website have a width of 940px, because this is what most designers are aiming for. So it must be possible. – Mark Aug 31 '13 at 13:53
The Bootstrap framework is responsive by default. Although 940 pixels may have been the standard designers have used for the past few years, like the past few years desktop resolutions are getting bigger and bigger to where 1170 pixels isn’t too monstrous. – Martin Bean Aug 31 '13 at 15:17

score 1 · Answer 3 · edited Mar 20 '16 at 16:52

1

The .navbar-static-top you are using forces your navbar to become full-width. Remove that class and you will get a resizable navbar. Then, you can wrap it in a span# of the size you want.

<div class="container">
<div class="row">
    <div class="span6 offset3">
        <div class="navbar">
            ...
        </div>
    </div>
</div>

edited Mar 20 '16 at 16:52

tmthydvnprt

10,398
8
52
72

answered Mar 20 '16 at 15:59

Does navbar-fixed-bottom force it too? – Jan 01 '17 at 19:14

score 1 · Answer 4 · answered Jul 25 '17 at 00:17

just simple:

.navbar{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

or,

.navbar.navbar-fixed-top{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

Hope it works (at least, for future searchers)

score 0 · Answer 5 · answered Feb 25 '16 at 15:49

Proper way to do it is to change the width on the online customizer here:

http://getbootstrap.com/customize/

download the recompiled source, overwrite the existing bootstrap dist dir, and reload (mind the browser cache!!!)

All your changes will be retained in the .json configuration file

To apply again the all the changes just upload the json file and you are ready to go

score 0 · Answer 6 · answered Jun 08 '16 at 15:05

0

If you are dealing with more dynamic screen resolution/sizes, instead of hardcoding the size in pixels you can change the width to a percentage of the media width as such

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

answered Jun 08 '16 at 15:05

Akshar

927
9
7

score 0 · Answer 7 · answered Jul 29 '16 at 19:42

0

Hello this working you try! in your case is .navbar-fixed-top{}

.navbar-fixed-bottom{
    width:1200px;
    left:20%;
}

answered Jul 29 '16 at 19:42

Laed

21
1
1
7

How to change navbar/container width? Bootstrap 3

7 Answers7

Linked