Menu navbar issue on Ipad

BburaksansalApr 10, 2020

Hello,

First of all this is a great template and I enjoy using it and its features. I'm upgrading from HTML 4 to HTML5 responsive design for my website.

I have a problem with navbar on Ipad screen. I have an Ipad 4. My navbar menu is perfectly displayed on laptop & desktop sizes. Also on mobile phones using vertical or landscape I have no problems as the menu adjust itself. BUT when I go to my website on Ipad;

on Landscape, the navigation bar goes below the logo overlapping the image slider on homepage or making the second line on other pages, hence the navbar and header are not displayed correctly.
on Portrait, the navigation bar is gone but unlike on mobile phones, the menu cascades so it doesn't show the slider as it should be (it's shown way down).

You can see a live example on www.allaboutturkey.us . I'm also attaching screenshots of homepage: from laptop/desktop (no issues), from mobile phone portrait/landscape (no issues), and from Ipad portrait/landscape (with problems).

I'd appreciate if you can provide me a solution for this issue on Ipad displays.

Thank you very much.

BburaksansalApr 10, 2020

more screenshots

BburaksansalApr 10, 2020

last screenshot

SSemicolon WebSTAFFApr 11, 2020

Hello,

Thank You so much for the Kind Words and very detailed explanation of the issue.

This occurs when there are too many items in the Menu than the available size. You can consider decreasing the Size of the Text in the Menu on these devices:

.device-lg #primary-menu ul li > a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    letter-spacing: 0px;
}

You can adjust the values according to your needs.

We just checked this on iPad and it appears to be working fine for us. Can you try refreshing the Page and check this Page again. Thanks for your Patience.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.