Problem with Mega menu - by Mentor_ - on WordPress WooCommerce support

This topic has 10 replies, 3 voices, and was last updated 3 years, 2 months ago ago by Rose Tyler

  • Avatar: Mentor_
    Mentor_
    Participant
    December 2, 2020 at 21:00

    I am creating a mega menu with static blocks and it seems that there is some js that is calculating smt and injects style that moves the dropdown to the left. I want all dropdowns of all nav elements to take the same space and start from the beginning of first element.

    Please, contact administrator
    for this information.
    9 Answers
    Avatar: Mentor_
    Mentor_
    Participant
    December 3, 2020 at 05:35

    I would like dropdowns to be like this

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 3, 2020 at 13:06

    Hello,

    Do you want to make the mega menu also full-width even if it includes the 1 column or just to show it from the start of the parent menu item http://prntscr.com/vv05o8 ?

    Regards

    Avatar: Mentor_
    Mentor_
    Participant
    December 3, 2020 at 14:01

    Yes full width regardless the columns of each element

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 4, 2020 at 11:54

    Hello,

    Add below code to Theme Options > Custom CSS

    @media only screen and (min-width: 992px) {
        .site-header .item-design-mega-menu .nav-sublist-dropdown {
            left: 0 !important;
            margin: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            transform: none !important;
        }
         .item-design-mega-menu, .header-top, 
         .header-main, .header-bottom,
          .header-wrapper .header-bottom .et_column {
            position: static;
        }
    }

    If it does not help then provide us with a link to your site and temporary WP Dashboard access.

    Regards

    Avatar: Mentor_
    Mentor_
    Participant
    December 4, 2020 at 17:24

    No, it adds full width but not limited to the header, i uploaded the staging site to a url of mine to give you access

    Please contact administrator
    for this information.
    Avatar: Mentor_
    Mentor_
    Participant
    December 5, 2020 at 11:23

    With these changes to your code the visual result is exactly what i need

    @media only screen and (min-width: 992px) {
        .site-header .item-design-mega-menu .nav-sublist-dropdown {
            left: 20em !important;
            margin: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 70% !important;
            transform: none !important;
    				overflow:scroll;
            
        }
         .item-design-mega-menu, .header-top, 
         .header-main, .header-bottom,
          .header-wrapper .header-bottom .et_column {
          position:static;
        }
    }

    The problem is that the dropdown won’t stay open when i hover.

    You can see it live on the link and credentials i provided you in my previous post.
    Thank you in advance

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 5, 2020 at 15:10

    Hello,

    Check now, please.

    Regards

    Avatar: Mentor_
    Mentor_
    Participant
    December 5, 2020 at 16:04

    You are just the best! Thank you very much!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 5, 2020 at 16:14

    Hello,

    You’re welcome!

    Regards

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

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