Return to previous page

Full Width Dropdown Menu like in Marseille03 with Elementor

This topic has 5 replies, 2 voices, and was last updated 4 years, 3 months ago ago by karobe

  • Avatar: karobe
    karobe
    Participant
    February 26, 2021 at 22:15

    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
    February 27, 2021 at 14:01

    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
    March 1, 2021 at 12:51

    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
    March 1, 2021 at 15:37

    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
    March 1, 2021 at 18:19

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

    #277182 Copied
  • Viewing 5 results - 1 through 5 (of 5 total)

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

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Animals Store – WooCommerce Theme
lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Wedding Store – WordPress WooCommerce Theme
lazy-placeholder
Business Card – WordPress Theme
lazy-placeholder
Flowers Store – WooCommerce Theme
lazy-placeholder
Interior – WordPress WooCommerce Theme
lazy-placeholder
Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Phone Service – WordPress WooCommerce Theme
lazy-placeholder
Architecture Studio – WordPress WooCommerce Theme
lazy-placeholder
HandMade Store – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.