3

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>
amphetamachine
  • 27,620
  • 12
  • 60
  • 72

2 Answers2

3

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.

Community
  • 1
  • 1
cfnerd
  • 3,658
  • 12
  • 32
  • 44
1

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).

cvrebert
  • 9,075
  • 2
  • 38
  • 49