How to Change Navbar Collapse Threshold Using Twitter Bootstrap-Responsive

How to change navbar collapse threshold using Twitter bootstrap-responsive?

You are looking for line 239 of bootstrap-responsive.css

@media (max-width: 979px) {...}

Where the max-width value triggers the responsive nav. Change it to 550px or so and it should resize fine.

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

Twitter Bootstrap: changed navbar collapse threshold, side-effect on drop-downs

Late to the party, but for posterity sake:

When resizing the navbar you need to adjust / overwrite two items in the bootstrap-responsive.css file.

• @media (max-width: 979px) => @media (max-width: 1120px)

AND:

• @media (max-width: 780px) => @media (max-width: 1121px)

(1120px is the threshold for navbar collapse)

see more: https://gist.github.com/4269590

how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css?

I just remove "in" class when click on link in the collapsed navbar using jQuery.
Like this:

$(document).ready(function(){
    $('.navbar-collapse a').click(function(){
        $(".navbar-collapse").removeClass('in');
    })
});

How to automatically collapse the top navbar on mobile view after user tap a link with Twitter Bootstrap?

Try this (I'm assuming bootstrap 3

$('.nav a').on('click', function(){
  $(".navbar-toggle").click() //bootstrap 3.x
});

---

Related Topics