Mega Menu Tab layout is not correct on Mobile

Hi Rod,

Please try adding this CSS:

@media only screen and (max-width: 600px) {
  #mega-menu-wrap-main-menu #mega-menu-main-menu {
    padding: 0;
  }
  .mega-menu-wrap {
    margin-left: 0 !important;
  }
}

Make sure you paste it after where you have added ‘margin-left: 150px !important’, otherwise it will not work.

Regards,
Tom

Thanks Tom – That CSS worked great for configuring my tabs correctly in the mobile view. Much appreciated!

But now the 3 buttons and the Youtube player do not resize correctly within the max mega menu drop down for “Our Camps” ,mobile view (view image link: https://i1261.photobucket.com/albums/ii590/AviatorSports/Mobile%20Mega%20Menu-Comp-Step2_zpssknzygr3.png).

The 3 buttons “Holiday Break Camps”, “Summer Day Camp” & “After School Camp” need to be smaller and the text needs to fit to the right of those 3 buttons and not overlay the buttons like it currently does in the image. How can I achieve this?

Kind Regards,
Rod

Hi Rod,

It might look better if the sub menus are displayed in a single column, please try adding this CSS to the menu theme:

@media only screen and (max-width : $responsive_breakpoint) {
    #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li {
        width: 100% !important;
        clear: both;
    }
}

Regards,
Tom