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!
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