Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1310894

    Hello guys

    I am experiencing a weird thing with menu on mobile. I am using Max Mega Menu plugin and the menu is working fine when set in Enfold as Logo left and menu right. If i am trying to set any other option the mobile menu does not open anymore.
    I would like to have Logo left and menu below, in this way it looks also good on desktop too. But if i set this in Enfold the Max Mega Menu does not open anymore on mobile. I see the icon of the menu, but does nothing on click.

    Thank you

    #1311047

    Hey hollabrunn,

    Thank you for the inquiry.

    It is possible that the plugin cannot locate the menu because it is inside another container with the ID “header_main_alternate”. Where can we see the issue? Please post the site URL in the private field.

    Best regards,
    Ismael

    #1311067

    Hello Ismael. Dropped the link in private area.
    Will set now logo left and menu below to be able to see the issue on mobile.

    #1311446

    Hello Ismael

    Found some documentation and tried this:
    @media only screen and (max-width: 989px) {
    .responsive #top #wrap_all .main_menu,
    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    display: none !important;
    }
    .responsive #header_main_alternate,
    .responsive #top #wrap_all #header_main_alternate .main_menu,
    .responsive #top .av_mobile_menu_tablet #header_main_alternate {
    display: block !important;
    position: relative;
    }
    .responsive .av-burger-menu-main,
    .responsive.html_mobile_menu_tablet .av-burger-menu-main {
    display: none !important;
    }
    }
    Added into Quick CSS
    Now it seems to work on mobile also but is full width.
    Can you help me with the adjustments needed to have only the burger icon?

    #1311491

    Hi,

    Glad to know that it is now displaying on mobile view. Regarding the adjustments, it seems to be the default layout of the menu. If you want to remove the background color, try this css code.

    #mega-menu-wrap-avia .mega-menu-toggle {
        background: transparent;
    }

    And to adjust its position, use this one.

    @media only screen and (max-width: 989px) {
    #mega-menu-wrap-avia .mega-menu-toggle {
        position: absolute;
        right: 0;
        top: -50px;
    }
    
    .responsive #header_main_alternate, .responsive #top #wrap_all #header_main_alternate .main_menu, .responsive #top .av_mobile_menu_tablet #header_main_alternate {
        display: block !important;
        position: absolute;
        width: 100%;
        top: 10px;
    }
    
    #mega-menu-wrap-avia .mega-menu-toggle.mega-menu-open + #mega-menu-avia {
        display: block;
        top: 50px;
    }
    }
    

    Best regards,
    Ismael

    #1311501

    Thank you Ismael

    With the background works.
    With the position no, and this what is happening:

    When using all the code the burger menu icon does not show anymore on mobile.
    When using only this part:
    @media only screen and (max-width: 989px) {
    #mega-menu-wrap-avia .mega-menu-toggle {
    position: absolute;
    right: 0;
    top: -50px;
    }

    on mobile looks good, the burger menu is near the logo in the right side. BUT on desktop it moves the whole content to the right, i mean the website gets aligned to the right.

    #1311735

    Hi,

    Thank you for the update.

    Would you mind posting the login details in the private field? We would like to test the modification and do some adjustments if necessary.

    Best regards,
    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.