-
Posts
-
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
Cheers
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.)…
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.
Screenshot:
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.
Hi,
Can you give us a link to your website? Dude’s code should work. Please remove browser cache then reload the page.
Regards,
Ismael
Hi Ismael,
I’ve got a staging server on typedesign.de. 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!
Hi,
Sorry, my bad. I only have the browser and this link (http://www.responsinator.com/?url=http%3A%2F%2Fwww.typedesign.de%2F) 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.
Regards,
Ismael
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 http://www.presentpro.de/peek 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 responsinator.com 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.
Regards,
Devin
Hey!
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: https://kriesi.at/support/topic/new-bug-in-16-font-icons-within-icon-boxes-cant-be-aligned-anything-but-left
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,
Andy
- The topic ‘Menu broken in Responsive mode’ is closed to new replies.