Menu
I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu collapses using media queries. I am not able to prevent this behavior.
This is my html
<div class="row"> <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div> <div class="span9"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav nav-pills"> <li><a href="#">Home</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Contact Us</a> </li> </ul> </div> </div> </div> </div> </div> </div> I know it has something to do with the media query in bootstrap, but not able to understand.
605
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Combining media query expressionsMax-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.
The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
What are common breakpoints? Common breakpoints are 320px — 480px for mobile devices, 481px — 768px for iPads & tablets, 769px — 1024px for small screens like laptop, 1025px — 1200px for large screens like Desktops, and 1201px and above for extra large screens like TV.
You can customize Twitter Bootstrap css compiling it from sass-twitter-bootstrap scss files and setting $navbarCollapseWidth in _variables.scss to your desired value...
Edit
As @Accipheran stated in the comments, for Bootstrap 3.x the name of the variable you should set is $grid-float-breakpoint.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
