Menu not working properly

Our menu, created with the header builder, behaves in a strange way.
When we hover on the first item “CATALOGO” which has a dropdown menu, the menu opens normally and covers the whole page.
When the mouse goes away from the hover position, the menu closes as expected.

The issue appears when the dropdown menu is open and we scroll the page.
The menu should stay open and show nothing behind it. Our menu “shrinks” and shows the content behind it during the scroll.

How can this be fixed so that we don’t see the page scrolling but only the opened menu?

Hello,

Try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.

.wd-event-hover:hover > .wd-dropdown,
.wd-event-click.wd-opened > .wd-dropdown,
.wd-dropdown.wd-opened {
    visibility: visible;
    opacity: 1;
    transform: none !important;
    pointer-events: auto;
    position: fixed; /* Ensures dropdown stays fixed */
    top: 0; /* Adjust this to align the dropdown as needed */
    left: 0;
    width: 100vw; /* Full width */
    height: 100vh; /* Full height to cover content */
    overflow-y: auto; /* Allows scrolling within the menu if needed */
    z-index: 9999; /* High z-index to cover page content */
}

.wd-dropdown {
    padding: 20px; 
    border-radius: 0;     
box-shadow: none; 
}

Best Regards

The fix partially works.
The dropdown menu content is fixed, but we’re missing the main menu toolbar.
That has to be visible for easy switch towards any other page.

The fullpage dropdown must start under the main menu bar
What do we need to change?

Hello,

You can modify the position of the dropdown menu to start under the main menu bar by adjusting the top property in the CSS. Try updating the top: 0; to match the height of your main menu. For example, if your main menu height is 80px, change it to:

top: 80px;

Best Regards

[Author]

Posts