-
Posts
-
On iPad, portrait view, the website has overlapping. 1: The logo and the menu items. 2: The text in the promo box and the promo box button. How can this overlapping be removed for only iPad portrait, or at least iPad?
Hi,
Edit js > avia.js, find this code
if(first_level_items > 8 && !bottom_menu)
{
switchWidth = 989;
header.addClass('mobile_menu_tablet');
}Replace the first_level_items with lesser digit. Something like this
if(first_level_items > 5 && !bottom_menu)
{
switchWidth = 989;
header.addClass('mobile_menu_tablet');
}Can you give us a link to your website?
I’ll tag Devin.
Regards,
Ismael
When i change the digit to a smaller digit. the menu dissapears when i make the site smaller.
I looked in the css code and maybe i found a solution. when the menu is over the logo i can change the padding of the menu items in the tablet view.
from 10px to 4px. Do you know how i can overrule this? I placed the original code under it. Its in layout.css on line 2687
media=”screen”
layout.css:2685@media only screen and (max-width: 989px) and (min-width: 768px)
.responsive .main_menu ul:first-child > li > a {
padding: 0 10px;
Fixed it.
add this to your quick CSS settings:
.responsive .main_menu ul:first-child > li > a { padding: 0 4px !important; }
you can change the 4px for your desired setting.
hmm, no. it also has this option when i make the site bigger. do i have to ad a “media” selector to it? how do i do that?
media=tablet ? then apply the css code.
Hi henryd,
If we can see the site live we can assist with some css changes. There are also some pre done media queries in your custom.css file which you can make use of to have the css above only effect tablet sizes but in general what the change *should* be doing is switching your responsive menu in earlier so the padding hack isn’t needed.
Regards,
Devin
That change only made the navigation menu disappear on the iPad.
Is there a way I can post a private reply?
Hi,
That is correct, you can change the padding on mobile view. You can do something like this on your custom.css or Quick CSS
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 1024px) {
.main_menu ul:first-child > li > a {
padding: 0 7px;
font-size: 11px;
}
}Regards,
Ismael
Is there a way I can post a private reply? Still waiting for an answer on that so I can provide more information.
On iPad, portrait view, the website has overlapping. 2: The text in the promo box and the promo box button. How can this overlapping be removed for only iPad portrait, or at least iPad?
Hi,
I’ll tag Kriesi. I think the issue occurs when you suddenly rotate the iPad on portrait view without refreshing the page.
Regards,
Ismael
We don’t have private posts or support available but you can use things like http://goo.gl/ to hide URLs and make them temporary.
What it sounds like is that the menu you have is a bit wider than typical or has more items but doesn’t meet the default number to switch the menu at a higher resolution width.
Seeing the site live and inspecting what you have exactly is the best route to find a solution.
Regards,
Devin
Thanks! You can take a look here:
The text currently has soft returns entered so that the text didn’t overlap the box in standard desktop view. Please advise.
Hi,
I visited the website, looks like you manage to use Media Queries to adjust the menus.
Regards,
Ismael
The menu issue has been resolved. Please provide solution ASAP to my 2nd issue: On iPad, portrait view, the website has overlapping of the text in the promo box and the promo box button. The text currently has soft returns entered so that the text didn’t overlap the box in standard desktop view, but it still overlaps in iPad portrait view. How can this overlapping be removed for only iPad portrait, or at least iPad?
Please, it’s been two weeks, I really need a solution for this promo box issue.
Hey!
Please add following code into the quick css field
@media only screen and (min-width: 768px) and (max-width: 989px) {
.avia-promocontent {
width: 45%;
}
}Best regards,
Peter
- The topic ‘Ipad portrait view – overlapping logo and promo box’ is closed to new replies.