Hi,
First of all, thank you for this great theme!!
My menu is overlapping with logo when I resize my Safari window or open the website on my iPad. I’ve browsed the forums and found some solutions but none of them seem to work for me. I tried changing the .css and .js but I can’t seem to get it right.
Can you help me please? My dev site is located at: http://inventar.nl/prestacion/.
Thanks in advance!!
Regards,
Stefan
Hi Stefan,
Try changing the switch width following the steps and code here: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320
Regards,
Devin
Hi Devin,
Thanks for your fast response!
I altered it and now it works fine. However if I turn my iPad horizontal my logo goes over the beginning of the Home-button.
I tried increasing the values but that doesn’t work.
This is my avia.js:
function avia_responsive_menu()
{
var win = $(window), header = $('.responsive #header');
if(!header.length) return;
var menu = header.find('.main_menu ul:eq(0)'),
first_level_items = menu.find('>li').length,
bottom_menu = $('html').is('.bottom_nav_header'),
switchWidth = 998;
if(first_level_items > 8 && !bottom_menu)
{
switchWidth = 998;
header.addClass('mobile_menu_tablet');
}
And here’s my Quick CSS:
@media only screen and (max-width: 998px) {
.responsive #header .main_menu ul {
display: none;
}
}
Can you tell me how I can fix the horizontal iPad menu?
Thanks again!
Your best route would be to reduce the number of items in your menu or switch to one of the alternative header options. You can see the various ipad versions screen widths here: http://screensiz.es/tablet