Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 2, 2020 at 5:37 am #1189335
    beenee

    Hi guys,
    I found a bunch of similar questions but not the right solution.
    How would I get a fullwidth submenu running as a burger menu on mobiles?
    In other words: How do I get the burger menu to work on mobile for the fullwidth submenu on the given page?

    I used this code:

    /*menu mobile*/
#top .av-submenu-container .mobile_menu_toggle {
    display: block;
}

#top .av-submenu-container .av-subnav-menu {
    display: none;
}

    …and it hides the fullwidth submenu correctly. But the burger menu doesnt show…
    any ideas..?
    txs
    Stefan

    • This topic was modified 4 years, 8 months ago by beenee.
    March 5, 2020 at 4:56 pm #1190498
    Yigit

    Hey Stefan,

    Sorry for the late reply!

    Please edit your Fullwidth Sub Menu element and choose to display “button to open menu” in Advanced > Responsive > Mobile Menu Display. You can also add custom CSS class to your Sub Menu element in Advanced > Developer Settings (“my-submenu” for example) and use it as following to display it only on mobile

    @media only screen and (min-width: 767px) {
.my-submenu { display: none !important; }}

    If that is not what you meant, please elaborate on the changes you would like to make and post screenshots. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)

    Best regards,
    Yigit

    March 6, 2020 at 4:31 am #1190720
    beenee

    Thanks yigit,

    this pointed pretty much in the right direction! I found the solution in this code:

    @media only screen and (max-width: 1080px) {
.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
    display: inline-block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu {
    display: none;
}

.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
    display: block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu li {
    display: block;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 0;
}

.responsive #top .av-subnav-menu > li:first-child {
    margin-top: -1px;
}
}

    with my own modification…

    Thanks again for your always great support. Problem solved!

    One more thing befor closing the ticket:
    Could you tell me “How do I center the Burger menu Symbol” …?

    Stefan

    Thanks again

    • This reply was modified 4 years, 8 months ago by beenee.
    March 6, 2020 at 1:43 pm #1190871
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .responsive #top .av-menu-mobile-active .mobile_menu_toggle {
    display: block;
    width: 120px;
    margin: auto;
}

    Best regards,
    Yigit

    March 6, 2020 at 1:52 pm #1190874
    beenee

    Thanks Yigit!
    excellent!!! Works!!!

    Very last question on this: At the Moment on the Burger view the displayed entry says: “Menü”
    Is there a way to change the entry to another word?
    Best
    Stefan

    March 6, 2020 at 2:28 pm #1190880
    Yigit

    Hi Stefan,

    Please install this plugin – https://wordpress.org/plugins/loco-translate/ and then search for “Menu” string and translate it as needed :)

    Best regards,
    Yigit

    March 6, 2020 at 11:31 pm #1191027
    beenee

    Thanks Yigit!
    Excellent work! Ticket solved – can be closed!

    March 7, 2020 at 8:37 am #1191078
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘av-submenu-container on mobiles should be burger menu’ is closed to new replies.