I made and support a local church site made using a mac with High Sierra and the latest versions of Rapidweaver, Stacks and Foundation. The site looks normal and responsive with a computer, iphone or iPad - but there is a ‘feature’ with an iPad in portrait mode which puzzles me.
The site Foundation Header line has a green background and contains the menu in white text.
When viewing a page in an iPad with landscape mode there is one line for the header and it all looks and works well with the menu imbedded and visible as white text within green background.
But when viewing a page in an iPad with portrait mode there are 2 lines for the header - the second line has a white background and the white text menu which is effectively invisible.
What am I doing wrong to have this result?
What settings can I change to make the header line a single line in iPad portrait or to add the green background to a second line?
Also, can I alter the simulate function in RapidWeaver to show the iPad in portrait?
I look forward to your replies, but go easy with me - I am a relative beginner here.
there isn’t enough space at that break point to hold everything.
you have two options;
reduce the contents (shorter words, smaller text, turn off logo, slogan, drop zone, dividers etc.)
-or-
change the break point where the menu changes to mobile to cover that size.
the menue is running out of space around 775 px but mobile menu isn’t showing until 640px that gap wis giving the results you are seeing.
Scott,
many thanks for your helpful reply.
I have altered the switch to mobile to be at 800 px.
That is working fine for my iPad mini 4, but not for my wife’s iPad Pro 9.7
I will investigate reducing the content as well.
Julian.
The best way to test for every screen size is to just “shrink” the desktop browser down. You can’t possibly test for every device out. It seems to work fine for me. At 799px it switches to the “Hamburger menu” at 800px I can see the 4 menu items fine.
Doug,
Viewing a page of my site on my iPad it is showing the full menu in landscape and switching to hamburger mode when I view the page in portrait. This is what i wanted to see.
On my wife’s iPad Pro (which is larger) she could still still get the second white header line in portrait depending on the font % size chosen in the Safari browser.
at 85% or less the full menu shows in the header line.
In between the second white header line is showing - is this fixable?
at 125% or more the hamburger menu shows in the header line.
Julian.
It’s the same issue, you have a finite amount of horizontal space an ipad pro portrait is: 1024
That should show your entire menu (at least how it is on the link you provided) your full menu shows on one line to aprox: 770-775px but your hamburger menu doesn’t show until 640px.
if you are not seeing it then your browser is zoomed or you need to clear the cache.
You still need to set your breakpoint in top bar to 775 give or take though.