Bootstrap: Full page width mega menu inside a responsive container

Question

I want to implement a full page width mega menu inside a responsive "container" div.

I want to use a responsive container, but have the menu reach out to the edges of the window. I.e. it needs to expand outside of the parent element and not being limited by the container. I've tried to use Yamm!3, but it seems to do the same thing as my example, which doesn't work. I know this whole thing kinda breaks the laws of CSS, but I was thinking that there might be some clever work around out there...

can you provide your code? – Vuthy Sok Jun 04 '15 at 02:45 — Vuthy Sok, Jun 04 '15 at 02:45
@VuthySok, please see the bootply example. – Martin Jun 04 '15 at 03:28 — Martin, Jun 04 '15 at 03:28
please remove position: relative; from .dropdown, .dropup – Vuthy Sok Jun 04 '15 at 04:02 — Vuthy Sok, Jun 04 '15 at 04:02

score 0 · Accepted Answer · answered Jun 04 '15 at 04:13

0

I found the answer. I needed to add position static to the dropdown and the next parent div. And then move down the dropdown-menu to make it appear below the menu.

Working example

answered Jun 04 '15 at 04:13

Martin

1,916
2
25
37

score 0 · Answer 2 · answered Jun 04 '15 at 05:15

0

you just add more style below:

.dropdown, .dropup{position:static}

answered Jun 04 '15 at 05:15

Vuthy Sok

720
3
10
22

Bootstrap: Full page width mega menu inside a responsive container

2 Answers2