Support » Plugin: Max Mega Menu » Mega Menu Tab layout is not correct on Mobile

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author megamenu

    (@megamenu)

    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: http://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

    Plugin Author megamenu

    (@megamenu)

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mega Menu Tab layout is not correct on Mobile’ is closed to new replies.