Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 3, 2015 at 11:14 am #389968
    sambolleter

    Hi there

    Since I upgraded to Version 3.08 of Enfold the Megamenu behaves differently. On wide Screens the Megamenu of “OUR SERVICES” (with 4 sub elements) flies out to the left. It is not centered and the width of each segment becomes to wide. If the window is set to the width of the website container the Megamenu behaves like it should.

    Alpenrose Website
    I enclosed 2 screenshots (private content).

    Could you advice me on the css codes to fix this behavior?

    Thanks a lot in advance.

    Kind regards, Sam

    February 3, 2015 at 6:03 pm #390264
    Elliott

    Hi sambolleter!

    The width is taken from the first container of your header which in your case looks a bit wider than usual.

    What happens when you remove this from your custom CSS?

    .responsive #top #header_meta .container {
    max-width: 100%;
    width: 100% !important;
}

    Go ahead and send us a WordPress login and we’ll take a closer look.

    Or if you just want some quick CSS to fix it then add this to your custom CSS.

    #header .three.units {
    width: 300px !important;
}
#header .six.units {
    width: 600px !important;
}
#header .nine.units {
    width: 900px !important;
}
#header .twelve.units {
    width: 1200px !important;
}

    All of the values are off a little so I think it’s some custom CSS your using.

    Best regards,
    Elliott

    • This reply was modified 9 years, 9 months ago by Elliott.
    February 3, 2015 at 6:41 pm #390291
    sambolleter
    This reply has been marked as private.
    February 4, 2015 at 8:29 pm #390896
    Elliott

    Hi!

    Oh I see. Try this instead.

    @media only screen and (max-width: 767px) {
.responsive #top #header_meta .container {
    max-width: 100%;
    width: 100% !important;
}
.responsive #header_meta .sub_menu > ul > li { padding: 0px 5px !important; }
}

    Regards,
    Elliott

    • This reply was modified 9 years, 9 months ago by Elliott.
    February 4, 2015 at 10:39 pm #390975
    sambolleter

    Hey Elliott

    Thanks for the code. I adjusted it to the following parameters so it works on the iPhone perfectly and the flag icons are not so close together:

     @media only screen and (max-width: 667px) {
.responsive #top #header_meta .container {
width: 100% !important;
max-width: 100%;
}
}

    Thanks for your help and support!

    Cheers, Sam

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Megamenu flies out to the left on wide screens’ is closed to new replies.