Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • #23944

    Hi there,

    I have menu looking ok in my large screen dimensions but it screws up when the responsive mode kicks in.

    a) Logo doesnt scale

    b) The line above the menu doesnt turn off in responsive mode

    c) on Ipad views both Responsive and Normal menu appears



    Please insert following code into the quick css field:

    @media only screen and (max-width: 767px) {
    #top .main_menu {
    border: none !important;

    .responsive .logo img {
    width: 50% !important;

    You can also use another width value (i.e. 60%,70%, etc.)…


    Thank you. Ill give it a go tonight



    Let us know if it works :)




    I’m having the same issue, or rather: issue c) “on Ipad views both Responsive and Normal menu appears”

    This happens only when in portrait orientation on the iPad, not in landscape. And it doesn’t happen on your demo site… just on mine (and apparantly andypeck’s).

    I was hoping this got fixed in v1.5, but it’s still there.



    Hi there andikleinke,

    Yep, thats one of the issues. Fingers crossed the fix Dude has given here will fix it.

    Good luck


    Forgot to say that. The fix given by Dude doesn’t affect this issue. Still both normal and responsive menu when viewed in portrait orientation on iPad.



    Can you give us a link to your website? Dude’s code should work. Please remove browser cache then reload the page.




    Hi Ismael,

    I’ve got a staging server on You can see the bug there when using an iPad in portrait orientation, I’ve tried a few different devices. Just checked again with Dude’s code = no luck.

    Thanks for your help!



    Sorry, my bad. I only have the browser and this link ( to check this. When I resize the browser to iPad’s resolution, the SlideOut Menu triggers fine.

    This happens when you turn your iPad sideways to Portrait mode without refreshing the page?

    Let me tag Kriesi and Devin to check this out.




    Coincidentally I was trying my test-website on my ipad and noticed the same issue: both menu’s appear when you open the page in landscape and turn it to portrait mode. I don’t think I tried loading the page directly in portrait mode, so not sure if it would be ok then, but turning from landscape to portrait definitely does mess it up. What I would expect it to do is to only show the small menu in portrait mode, my desktop menu is too long to fit (especially in other languages).

    Glad it’s not just me. :)


    Hi Ismael,

    yes, that’s the story: site looks fine on iPad in vertical orientation, you turn the thing sideways… boom, you got your menu PLUS the square responsive menu icon. It also happens if you reload the page in vertical orientation, not just when turning.

    Two other things I noticed:

    – It doesn’t seem to have anything to do with plugins. I deactivated everything I got running, still the same issue.

    – I set up the site from scratch on a new server, it didn’t show the issue when I had only 2 menu items. Now I got 5, and the issue is there. BUT: returning to 2 menu items again doesn’t solve it. I know that’s strange, maybe it gives you guys a hint about what is happening here.

    Thanks a lot for your help!


    This might help: I managed to recreate the issue on a desktop browser as well, both Firefox and Safari on Mac show this behavior when you resize the window to the offending width… which is precisely 768 pixels.


    Just a quick note: I’ve switched servers as I’m getting closer to going live. You’ll find the site at for now. I would be really really grateful if we could find a solution here. Thanks!


    [please disregard this post. I wrote some stuff about not working properly and thus not being trustworthy, then I realized it was all my own fault. :) ]


    I see what you mean. Its only after the mobile has been triggered and then it stays ‘stuck’ on mobile which makes the menu appear.

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    /* iPads (landscape)
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {

    #top #advanced_menu_toggle {
    display: none;


    Which is a media query designed to target ipads landscape specifically and will hide the mobile button even if its trying to show. Let us know if it works for now and I’ll put it in as a bug.





    Actually I think that was a javascript issue. I was able to reproduce it and I think I fixed it :)

    Next update tomorrow will contain an improvement, please let us know if version 1.6 fixes your problems ;)


    Thanks a lot, Kriesi, the 1.6 update fixed it! :)

    It introduced another bug though, which I’ve outlined here:

    Also, there are a few other things that are a bit weird on the iPad. The fixed menu doesn’t stay fixed in portrait orientation, and while it does remain at the top border of the screen in landscape orientation, it does not shrink like it does on desktop browsers. And: the parallax-ish effect for color sections does not work on iOS-Safari at all, and is very choppy on Safari for Mac.

    I’ll open up separate threads for these, would be fantastic if you could have a look.

    Thanks again,


Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Menu broken in Responsive mode’ is closed to new replies.