Home › Forums › WoodMart support forum › Menu not working properly

Menu not working properly

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 11, 2024 at 7:40 pm #611406

    stefano_ts
    Participant

    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?

    November 12, 2024 at 10:41 am #611540

    Aizaz Imtiaz Awan
    Keymaster

    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

    November 13, 2024 at 1:11 pm #611870

    stefano_ts
    Participant

    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?

    November 13, 2024 at 3:19 pm #611906

    Aizaz Imtiaz Awan
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)