Issue of layers across multiple header levels of “background overlay”

Assume the following scenario of headers.

1. Create a header
2. In the top bar header, add a menu with some two-level items (and enable background-overlay)
3. In the main header, add also a menu with some two-level items (and enable background-overlay as well)

When you hover on the menu of the Main Header, it works great.

When you hover on the menu of the Top Bar Header, I was expecting to see the Main Header being overlaid, but it’s not and that’s very confusing visually.

Attachments:

You must be logged in to view attached files.

More simply explained :

When both Top Bar Header and Main Header have menus (where the background-overlay is enabled) and we hover on a menu of the top bar, this hover should also overlay the Main Header. Why? Because that’s how visually it’s supposed to be coherent, otherwise it’s not visually logic.

I hope it’s clear this way

Hello,

This is not a bug. Background overlay is always placed under the header, no matter which row element it was activated, and it always darkens site content under the header. It was designed in such a way because our initial header structure does not allow it to be done otherwise. Current background overlay behavior cannot be changed via simple custom CSS code.

Best Regards.

Well for you that’s not a bug, but for me that’s a bug. In the current situation, I consider that the “background-overlay” for menus on Topbar Header is NOT working.

If I want to overlay the background for a menu, it means I don’t want to see anything else except that particular men.

That should include other levels of the headers. So your background-overlay should be reworked to be able to hide other levels of headers (instead of hidding content outside of headers only).

Hi,

As was said in the previous reply our header structure does not allow us to create a background overlay in the way you have described. Changing the header structure will break headers in the vast majority of our clients. If we find a solution to change the header structure without breaking already created headers, we can review the operation of background-overlay in the future.

For now, you can use background-overlay only for elements located in the bottom row, or disable this option for elements with small dropdowns since this feature is optional for each individual element.

Kind Regards

[Author]

Posts