Full Width Dropdown Menu like in Marseille03 with Elementor

Solved4 replies2 participantsUpdated by karobe

  • Avatar: karobe
    karobe
    Participant

    Hello,

    I can’t seem to find any settings to make my Mega Menus (created with a static block) full width and/or centered below the header as in the Marseille03 Demo for Elementor.

    The solution suggested here (https://www.8theme.com/topic/full-width-dropdown-menu/#post-252517) didn’t work.

    Neither did copying the Custom CSS using in the Marseille03 Demo that seems to do the trick there, but I am just guessing at this point…

    Thank you!

    Please, contact administrator
    for this information.
    #276776 Copied Theme version: 7.2.5 WooCommerce version: 5.0

    4 Answers

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Try to add this code in Theme Options > Theme custom CSS > Custom CSS for desktop:

    .et_b_header-menu .menu .menu-item-has-children {
    position: static;
}
.et_b_header-menu .menu .menu-item-has-children .nav-sublist-dropdown {
    width: 1140px !important;
    margin: 0 !important;
    left: -180px !important;
}

    Regards

    #276871 Copied
    Avatar: karobe
    karobe
    Participant

    Thank you for the suggestion.

    It seems the width of the page content in Dektop Mode switches between 1140px and 940px, depending on how wide the browser window is.

    That means, your solutions works in the wider mode, but when there is less space, some of he menu is cut off (see screenshot).

    Is there a way to remedy this?

    Thank you very much.

    Please contact administrator
    for this information.
    #277097 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Try to change the previous code to:

    .header-wrapper .et_b_header-menu .menu .menu-item-has-children {
    position: static;
}
.header-wrapper .et_b_header-menu .item-design-mega-menu .nav-sublist-dropdown {
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
}
.header-wrapper .et_column {
    position: static;
}

    Regards

    #277139 Copied
    Avatar: karobe
    karobe
    Participant

    That works perfectly! Thank you very much for your support!

    #277182 Copied

The issue related to '‘Full Width Dropdown Menu like in Marseille03 with Elementor’' has been successfully resolved, and the topic is now closed for further responses