CODEWITHSUNDEEP
twitter-bootstrapcss
user3090947
user3090947

Reputation:

How can I make Bootstrap NavBar display as collapsed on small & medium devices?

I am working on a nav bar. I have seen that, nav bar is collapsed in mobile size or col-xs size. But I want to make this nav collapsed also for medium & small devices. How can I accomplish this.

Can check from live site : https://dl.dropboxusercontent.com/u/86581418/consegna/blog.html

Code :

    <div class="col-md-7 col-sm-12 col-xs-12" style="padding-top: 40px;">
       <nav role="navigation" class="navbar navbar-default navbar_top" >
    	   <div class="navbar-header" style="margin-top: -70px;">
    		<button type="button" data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" style="border-color:#fff;">
    			<span class="sr-only">Toggle navigation</span>
    			<span class="icon-bar" style="background-color:#fff;"></span>
    			<span class="icon-bar" style="background-color:#fff;"></span>
    			<span class="icon-bar" style="background-color:#fff;"></span>
    		</button>
    		</div>
    
    		<div id="myNavbar" class="collapse navbar-collapse top_nav">
    			<nav class="nav_top">
    				<ul class="nav navbar-nav top_nav_block">
    					<li ><a href="#">HOME</a></li>
    					<li><a href="gallery.html">GALLERY</a></li>
    					<li class="active"><a  href="blog.html">BLOG</a></li>
    					<li><a href="about.html">ABOUT</a></li>
    					<li><a href="contact.html">CONTACT</a></li>
    				</ul>
    			</nav>												
    		</div>
    	</nav>
    </div>

Upvotes: 3

Views: 5610

Answers (2)

cfnerd
cfnerd

Reputation: 3799

Technically, @cvrebert is correct in his answer. However, you might not be as versed in LESS as other developers. If that is the case, you could add in a custom CSS file to be included into your <head> after the inclusion of the bootstrap css file. In your custom CSS, you could add in additional media queries. There is another stackoverflow article that describes this: Change bootstrap navbar collapse breakpoint without using LESS. The answers in that article will get you close to what you want. Hope this helps.

Upvotes: 3

cvrebert
cvrebert

Reputation: 9259

Read the documentation?

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

Upvotes: 1

Related Questions