Question

I am using Twitter Bootstrap 2.1.1 and use navbar collapse and navbar dropdowns similar to this example on Twitter Bootstrap Github page

I know that it collapses at 979px and expands at 980px, and I went and changed it to collapse at 779px, based on the accepted answer to:

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

I modified bootstrap.responsive.css

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

to

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

Works great, and I see that the navbar now collapses at 779px and expands at 780px.

However, I am seeing a side effect.

When I resize my browser to have a width between 780px and 979px (a range where the navbar is no longer collapsed) and I click on a drop-down, it won’t render the drop-down options. If I resize to 980px or wider, then I see the drop-down options.

I am using Firefox Firesizer, so I can watch the width. In fact, if I click on a drop-down and then drag the window size, I can see it draw the drop-down options right at 980px and then they disappear when I go under 979px.

Has anyone come across this before?

I suspect there is some other Media Query for the dropdown-menu (or its related classes) that would need to be changed when changing the navbar collapse threshold. However, I have not been able to figure out a solution. I would be very grateful for any help, insight, or recommendations. Thanks!

Answer 1

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