Bootstrap can't set width of uncollapsed menu

seemingly simple problem, i would’ve thought. but on this page, if you shrink the browser (width-wise) until the toggle buttons appear, & click either of them, the resulting popdown menu’s only take up a fraction of the browser width. i want them both to stretch to take up the full 100% of the width

trouble is, i can’t seem to target them with jquery selectors. if i type the following into firebug’s console…

$('').css({"border-color": "#C1E0FF", "border-width":"5px", "border-style":"solid"});

it sticks a border around the dropdown menu (whichever one you’ve toggled open), but i can’t seem to find any selector+CSS rule combination that makes the content of the dropdown div expand to fill the whole width of the screen

help appreciated

P.S: annoyingly, if you apply the rule above in firebug & then expand the browser window so its wide enough to make the toggle buttons disappear, the light blue border still persists??? should it do this? i assumed it would no longer have the .in class attached to it so any CSS rule pertaining to ‘’ would be invalid???

Cant look too much now, off to work…But a width set in the id of an element will take precedence over a width set in a class.

Something like this should get you started.

@media screen and (max-width:768px){
#navbar-collapse-1 .navbar-nav {margin:0}
#navbar-collapse-2 .navbar-form{
1 Like

funnily enough, without answering the question someone on stackoverflow questioned why i was using floats on bootstraps’ expanded collapsible dropdown menu’s (never quite sure what to call these). so i had a 1.30am idea to implement almost exactly what you’ve just suggested. & then after that had a bit more success adding additional classes like box-shadow: none; & stuff

cheers all the same though. & nice to find sitepoint’s as reliable as ever. :8ball:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.