Tagged: iPad, landscape, mobile menu
Hi Team,
I know this topic has been created a lot – but though I’ve been looking for one I can’t find a solution for my issue.
I have a lot of menu items so that these overlap my logo on th iPad in landscape mode. So I would need to have the mobile menu to appear also in landscape and not only in portrait mode.
I tried to insert the quick css code I found and looked for the widthin avia.js but didn’t find anything.
Please advise!
Thanks,
Jan :)
Hi Yigit,
it’s still a draft: http://webigami.de/justcom
When you resize the browser to iPad landscape width the menu overlaps the logo. The logo is 780 × 200 px big:
Thanks and Cheers,
Jan :)
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1060px) {
.av-main-nav > li > a { padding: 0 10px; }}
Regards,
Yigit
Hey Yigit,
thanks, it’s working in my browser now. But not on the iPad:
Can’t I just tell the theme to activate the mobile menu in landscape on iPad? I could also do it in a child theme if it’s necessary. Please advise.
Cheers,
Jan :)
Hi Jan! :)
Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px.
Cheers!
Yigit
Hi Yigit,
I already did this before. Doesn’t help… :(
So what else can I do?
Jan
Hey!
Try this on Quick CSS:
@media only screen and (min-width: 989px) and (max-width: 1024px) {
.av-main-nav > li > a {
padding: 0 5px;
font-size: 12px !important;
}
.logo img {
max-height: 70px !important;
}
}
Remove browser cache then reload the page.
Cheers!
Ismael
Hi Ismael,
great, thank you. Now it works! :)
Cheers,
Jan