Bootstrap 3 - full width sub-menu

Question

I'm trying to make my sub-menu have the same width as the entire parent menu, however of course the sub-menu is taking on the width of it's parent li. I also need the sub-menu li items to be floated left next to each other - i tried doing padding: 0 -421%; on dropdown-menu which made it the same width as the actual parents menu, but of course i cannot float the li's inside the dropdown menu due to the extra padding.

The fiddle

<a href="/">

(added as i keep getting "jsfiddle must be accompanied by code" error).

Please put up the code or try to recreate the situation in jsfiddle. — phpcoderx, Feb 19 '14 at 14:24
when i understand your question well, you can use the solution from http://stackoverflow.com/questions/26449960/full-width-bootstrap-dropdown-nav too, demo: http://www.bootply.com/E8DurpOyBi — Bass Jobsen, Nov 25 '14 at 19:34

phpcoderx · Answer 1 · 2014-02-19T16:05:05.943

0

Try this:

 .dropdown-menu {
     width:597px;
  }
  .dropdown-menu li {
     float: left;
  }

Not the best of approach,but this should give you what you were looking for.

edited Feb 19 '14 at 16:05

answered Feb 19 '14 at 14:57

phpcoderx

570
5
16

Almost, but the li's are still stacked, having added a float left all of the li's are now on top of each other (not stacked, but literally overlaying each other). – Nikki Mather Feb 19 '14 at 15:05
They're still stacking on top of each other, rather than floating next to each other unfortunately. – Nikki Mather Feb 19 '14 at 15:14
@NikkiMather You want them arranged horizontally? – phpcoderx Feb 19 '14 at 15:19

score 0 · Answer 2 · answered Feb 19 '14 at 15:03

As your submenu seems to only be used on large devices, I would suggest to fix its width :

@media (min-width:991px) {
    #slidemenu .dropdown-menu {
        width: 910px; 
        padding: 5px;
    }
}

Why 910px :

{container size} - {container horizontal padding} - {navbar-collapse horizontal padding}
= 970 - (15 + 15) - (15 + 15)
= 910

Bootstrap 3 - full width sub-menu

2 Answers2