Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 20, 2021 at 3:06 pm #1310894
    hollabrunn

    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

    July 21, 2021 at 7:47 am #1311047
    Ismael

    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

    July 21, 2021 at 9:03 am #1311067
    hollabrunn

    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.

    July 22, 2021 at 12:10 pm #1311446
    hollabrunn

    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?

    July 22, 2021 at 2:39 pm #1311491
    Ismael

    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

    July 22, 2021 at 3:28 pm #1311501
    hollabrunn

    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.

    July 23, 2021 at 7:08 am #1311735
    Ismael

    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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.