ifusion ifusion - 3 months ago 8
Sass (Sass) Question

How to make sub menu span full width of the browser window?

I want my sub menu to span the full width of the browser window like the below image:

enter image description here

I am using

Bootstrap
, also my main menu is floated to the right.

I have created a demo on what I have done so far. How do I achieve this result?

http://codepen.io/ifusion/pen/oLVVXj

Answer

First of all, bootstrap makes you really unflexible. So if you want to use it I suggest to move the submenu out of the menu's elements, because the width:100%; is dependent on the parent. So everything that should be wider than the parent, shouldn't be the child of this parent element. In addition position:absolute is dependent on the next parent with position:absolute or position:relative. So there are many things that don't make it easy. To move the submenu would make it a lot easier. There you can just use width:100%; and position:absolute with left:0.

Alternatively to get the submenu out of the flow of the page, you could use position:fixed. And width:100%. Check out the Codepen for this solution. I like the first one more, even if it's more work. However, fixed positioning has some side effects, but maybe it's not important for you.

Comments