Reputation: 931
I'm trying to make a dropdown menu 100% width of screen with my current markup seen here: https://jsfiddle.net/0nd5hL5h/
I've tried using the following styles on the .dropdown-menu class but it's causing a horizontal scrollbar, giving the body overflow-x:hidden is not an option.
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
If you have any suggestions or can provide a solution without changing my current markup please share!
Upvotes: 1
Views: 2597
Reputation: 12400
Remove relative positioning from dropdown.
.dropdown{
/*position: relative;*/
}
Center the dropdown against the body:
.dropdown:hover > .dropdown-menu{
margin-left: 50%;
width: 100vw;
transform: translateX(-50%);
}
Oh and, I recommend using border-box
.
*{ box-sizing: border-box; }
Edit:
Apparently 100vw
takes the entire viewport width into account. Which includes the width of a vertical scrollbar. This makes sense in hindsight but seems like a bad choice in terms of the spec.
Either way, a quick patch is to disable overflow-y
on the document.
html{overflow-y: hidden;}
Upvotes: 1