Bootstrap 3 comes as a responsive layout out of the box – which is great. But sometimes you need to make a site which is not responsive. Basic instructions are found here, but they don’t say how to disable the navbar responsive behaviors.

So, that’s why I’m writing this. It’s fairly simple, so here’s how you do it…

  1. Remove the meta from the header
  2. Set a static container width
  3. Set the media query breakpoints (to prevent navbar from collapsing)

Step 1: Remove the meta from the header

Go to the header of  your site (usually head.php or header.php in WordPress) and comment out this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Step 2: Set a static container width

Add this in your css file. Just create a selector like this:

.container { width: @container-desktop !important; }

note: @container-desktop is defined in variables.less
You could also just use any number you like, i.e. width: 940px !important;

Step 3: Set the media query breakpoints (to prevent navbar from collapsing)

Find the variables.less file inside bootstrap, and starting around line 214 you will see the variables that control when the @media queries fire in your CSS. Change the mobile screen variables to 0. You can leave the desktop values, or any value which matches the container you just set.


/**
* File: bootstrap/variables.less
* The following starts around line ~214, but has been
* reduced here just to show what was changed.
*/

// Media queries breakpoints
// ————————————————–
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 0; //480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 0; //768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;

See the Pen Turn off nav responsive in Bootstrap 3 by William (@bigwilliam) on CodePen.
0

Optionally: You could accomplish step 3 by just changing the container sizes in variables.less (line 629) to just be a single size you specify (i.e. 960px;)

Notes

When doing a non-responsive site, I generally like to still keep the large and medium media queries functioning in Bootstrap, just so that the site expands a little for people with larger screens. The difference in sizes is usually not significant enough to create extra work, but it also makes the site a little nicer for different screens.

28 responses to “Turn off responsive behavior for Bootstrap 3”

  1. Hello there. Do you happen to know whether it is possible to set a fixed width container for only extra small devices in Bootstrap 3 to be for example 320 pixels wide? I know it is set to be auto out of the box but was wondering if that was possible. I am a newbie. Thanks!

    Reply

  2. Yes, just follow the steps above, but in Step #2, set the container width like this:

    .container { width: 320px !important; }
    Reply

    1. It would help if you could show me the css file you want help with. But with just CSS, I would look for the .container selector and give it a static width. i.e.

      .container { width: 940px; }
      Reply

  5. Hi, The code is working for me but the navigation bar collapses even after i removed collapse class . check url cthreelabs.com/ias/



    true,
    'container'=> false,
    'menu_class' => 'nav navbar-nav dropdown',
    'theme_location' => 'main-menu') ); ?>

    Reply

    1. Are you sure that is where the collapse class is? Look above that in the “nav” section.

      Reply

  6. Hi William,

    Is it possible to collapse the navbar below below 480px instead of the default 768px.

    Reply

    1. You would have to change the css attributed or the .collapse class in your css. Do a search in the css page and find everywhere .collapse is found. I would need to know which version of Bootstrap you are using. Can you point me to which files you are using?

      Reply

  7. This seems to be better solution than the one in the bootstrap documentation, however this doesn’t word in IE8!

    The container is fixed but all the columns are stacked.

    Any solution you can suggest?

    Reply

    1. Solved!

      Instead of setting:
      @screen-sm: 0; //768px;
      Set:
      @screen-sm: 1px; //768px;

      and same for other sizes. Looks like respond.js doesn’t pick up on 0 value.

      Reply

      1. @Vyacheslav, glad you found the solution! Thanks for posting it as well to help others find it.

        Reply

  8. hello,
    is there a way to stop the responsiveness for medium, small screens?
    and leave it for only phones?

    let me know please, thank you very much!
    Mauricio

    Reply
  9. Pingback: Remove responsive from opencart custom theme (bootstrap)

  10. I have a responsive opencart theme using bootstrap 3 I tried everything you said and checked all the comments but nothing new happens!
    There is 2 .less files that contain [screen-(xs,sm,md,lg)]
    the one is catalogviewthemelexus_nextstoredevelopmentlessvarsvariables-bootstrap.less
    and the other one
    catalogviewthemelexus_nextstoredevelopmentlessbootstrapvariables.less
    I changed both of them, still nothing, I’m hopeless I could use any help,
    Thanks a lot

    Reply

    1. I would create a media element in your css file that sets the container to be 1000px and set it as important. So…

      
@media (max-width: 1000px) {
    .container { width: 1000px !important; }
}
      Reply

  16. Hi,

    I’m using Unite theme with Bootstrap and WordPresses menu. I have it set up so that within the desktop and responsive menu there is a dropdown for subpages. Problem is the subpages overlap my other pages and essentially get cut off when viewed on a cell phone or tablet. Is there any way I can list the subpages as just regular pages when viewing them on the mobile and tablet but keep the drop down for the desktop?

    Here’s the temporary website I’m referring too http://garagedoorparts-canada.ca/ecommerce.

    Thanks for your help in advance.

    Phil

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *