Search code examples
htmlcsstwitter-bootstrapmegamenu

Bootstrap: Full page width mega menu inside a responsive container

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

Bootply example

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

Solution

  • 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