[Resolved] Navigation overlay

[fabien]

How would I go about replicating the off-panel opacity overlay onto the desktop menu? The idea is that anything below the submenu (when active) is darkened.

[Tom]

Hmm, kind of a tough one, but a cool idea.

What kind of dropdown menu are you using? Hover or click?

[fabien]

The menu is Click. Because your off-layer menu already has this, I would have thought it would be an easy one? 🙂

[Tom]

Can you add your link to the private field so I can see your site? I’ll play around to see if it’s possible at the moment 🙂

[fabien]

I’ve amended the link in the original post request.

I was also hoping to control the location (margin left) of the navigation as header. At the moment the logo is blown up and stuck to the left. I need this navigation as header because I want the menus to span the whole screen width (not just the navigation container).

[Tom]

Try this CSS:

.dropdown-click .main-navigation .main-nav > ul > li > .sub-menu:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 100%;
    background: rgba(0,0,0,0.5);
}

Not too sure what you mean about the navigation? Can you explain a bit more?

[fabien]

fantastic! I changed height to 200% because it would fall short on a 27in screen… the 100% only really tells the shadow to meet the height of the submenu.

How can we exclude secondary nav from this effect? This works very well on the main nav but because the secondary nav has much shorter submenus, it projects an awkward looking tiny shadow.

I tried this with no effect.
`.dropdown-click .main-nav .main-navigation > ul > li > .sub-menu:after

[Tom]

I just adjusted the CSS above: https://generatepress.com/forums/topic/navigation-overlay/#post-960341

Let me know 🙂

[fabien]

brilliant, thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts