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   lt div class  navbar navbar-inverse navbar-fixed-top  gt         lt div class  container  gt           lt div class  navbar-header  gt             lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt              lt  button gt             lt a class  navbar-brand  href     gt Site Name lt  a gt           lt  div gt            lt div class  collapse navbar-collapse  gt              lt ul class  nav navbar-nav navbar-right  gt               lt li class  active  gt  lt a href   shop  gt Shop lt  a gt  lt  li gt               lt li gt  lt a href   showcase  gt Showcase lt  a gt  lt  li gt               lt li gt  lt a href   help  gt Help lt  a gt  lt  li gt               lt li gt  lt a href   my account  gt My Account lt  a gt  lt  li gt               lt li gt  lt a href   cart  gt Cart  lt span class  glyphicon glyphicon-shopping-cart  gt  lt  span gt  lt  a gt  lt  li gt             lt  ul gt           lt  div gt  lt  --  nav-collapse -- gt         lt  div gt     lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Hello this working you try  in your case is  navbar-fixed-top     navbar-fixed-bottom      width 1200px      left 20

User · Answer

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

User · Answer

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    lt div class  container  gt   lt div class  row  gt       lt div class  span6 offset3  gt           lt div class  navbar  gt                           lt  div gt       lt  div gt   lt  div gt

[css] How to change navbar/container width? Bootstrap 3

Examples related to css

Examples related to twitter-bootstrap