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…
- Remove the meta from the header
- Set a static container width
- 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.
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.
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!
Yes, just follow the steps above, but in Step #2, set the container width like this:
Is it possible to have responsiveness but top navbar to show like a desktop. No drop down menu.
Yes, just remove the class “collapse” from the navigation elements.
Hi, can you tell me how to achieve step three by editing the css instead of the LESS files?
It would help if you could show me the css file you want help with. But with just CSS, I would look for the
.containerselector and give it a static width. i.e.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') ); ?>
Are you sure that is where the collapse class is? Look above that in the “nav” section.
Hi William,
Is it possible to collapse the navbar below below 480px instead of the default 768px.
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?
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?
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.
@Vyacheslav, glad you found the solution! Thanks for posting it as well to help others find it.
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
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
Thanks BigWilliam.
Thanks a lot! =)
how can i remove “the responsive” code for resolution less than 1000 px
I would create a media element in your css file that sets the container to be 1000px and set it as important. So…
Hi mate i need to ask u somethin about Bootstrap, i have downloaded this template http://www.websitetemplatesonline.com/free-template/bootstrap-free-template.html …, and i just want to hide this http://prntscr.com/8h5mms from template to be invisible, is that posible and can u say me how? Tnx
@Nikola,
You would add this CSS to your stylesheet to hide that bar:
.navbar { display: none; }Before: http://prntscr.com/8h5yap
After: http://prntscr.com/8h5y3h
I lost whole nav menu, u just want to remove Bootstrap.
Thank you for your prompt response
What exactly are you trying to hide?
I did it! That was at the end of the page 🙂 Thanks anyway 🙂
hey
i remove the responsive view from the site
but not removed from category
which file i must edit to remove responsive from category and home?
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
Great Solution!!