CODEWITHSUNDEEP
htmlcss
user3304303
user3304303

Reputation: 1043

How to make sub-menu span full screen if parent element is NOT full screen width?

At the top of this site, when you hover over Solutions, Brands, etc, a blue dropdown back comes up. I'd like that to go full width of the page, but even if I set the width of that element (div.mega-dropdown-inner) to 100%, it only fills up 100% of it's parent element, not the full page.

Is there a relatively easy way to accomplish this, or is my only option to make the parent element(s) 100% width first?

I guess what I'm asking is...Is there a way to tell the CSS that I want the "width" parameter to base itself on screen width, not parent element width? Like an override of sorts.

I'm assuming no, but figured I'd ask some smarter people to make sure.

Upvotes: 1

Views: 3248

Answers (4)

Felix A J
Felix A J

Reputation: 6490

If none of the parent elements of the dropdown has position:relative, you can simply give position:absolute; left:0; width: 100%; so it will be relative to body.

https://jsfiddle.net/afelixj/f0ktvxcv/

Upvotes: 0

ui-matt
ui-matt

Reputation: 394

Simple line of css should do the trick:

.mega-dropdown-menu {
    width: 100vw;
}

By setting the width of the dropdown to the size of the viewport it will ignore it's containers width and can be achieved from css only and without positioning divs.

Upvotes: 2

Chris Hobbs
Chris Hobbs

Reputation: 817

Nope, divs will always look at their parent for guidance. You COULD set your width to be something ridiculous like 300%, or you could use javascript to get the active window screen size and set it equal to that, but then you're opening yourself to a ton of resizing issues.

You have lines like this one...

<div class="nav-child dropdown-menu mega-dropdown-menu" style="left: -383.53125px;">

You COULD do something where you set the left:-100%, or use whatever the nav bar is. So if your nav bar is set to 65% or something like that, then you would set your left:-65%. It may take some playing around with it. You also could set your options for the parent like this...

position:absolute;
left:0;

And it should align it on the far left side.

Upvotes: 0

Alexander Bell
Alexander Bell

Reputation: 7918

You can create two different CSS3 classes: for Menu top-level and sub-menu, and set e.g. position:absolute, left:0; width:100%; for sub-menu. Hope this may help.

Upvotes: 0

Related Questions