Header not working on ipad size screen

Support
#1

Hi there

I have a website in development. I have built with pro and everything is fully up to date.

The menu is quite long so I wanted it to change to a mobile menu on anything from ipad size down. I was given this code to put in

@media (max-width: 979px){
.x-nav-wrap.desktop,
.x-nav-wrap.mobile.x-collapsed {
display: none;
}

However when you look at the ipad size, on an ipad, then the menu is all strange and does not show properly.

I would be grateful if you could just take a look and let me know if you can see anything untoward.

Thank you.

#2

Hi Eileen,

Thank you for writing in, that CSS code you have shown above is for x standard header. Since you have a custom header, please inspect your Navigation Inline element and under customize tab, hide it on 4 screen sizes except on the XL screen (1200px and above)



Then do the opposite to your Navigation Collapse element. Hide it on the XL screen only.



Hope it helps,
Cheers!

#3

Hi Friech

Thank you but I already did that!

I might add that it works fine on the mobile and laptop it is just the ipad size and the size in between ipad and mobile.

Any other ideas.

Kind regards

#4

Hi,

You can add a unique class to your elements.

eg. Add my-nav-inline to your navigation inline element

You can then make it hidden in any screen width you like using the code below.

@media (max-width: 979px){
.my-nav-inline {
    display: none;
}
}

Change 979px for when you would like to hide it.

You may do the same to your Navigation Layered element.

For more information regarding @media you may refer to the link below

Hope this helps

#5

Hi Paul

I am a bit confused as to why it is looking so bad on an ipad size. I thought the headers were supposed to resize automatically without all this fiddling.

It is perfect on phone size and I have hidden and shown in all the correct places both on inline and collapsed.

Kind regards

#6

Hi @Jimmmmmer,

Would you mind providing some screenshots of what you’re getting on iPad? If you’re referring to the menu displaying similar to the desktop, then it’s because iPad surpassed even the screen resolution of a desktop/laptop. Add-in a keyboard and it will serve as a laptop too. And a laptop with detachable keyboard, remove its keyboard and it’s now a tablet too.

To properly address the issue, you can use the option for hiding laptop or medium devices as it’s in between the laptop and iPad size. The hide during breakpoints option is only applicable for the resolution’s dimension, it doesn’t have a capability to differentiate which is iPad or laptop if both shares the same resolution.

Thanks!

#7

Hi Rad

I will upload secure for you to see

ahh I cannot only can share public image

#8

Hi,

I have no Ipad available to check your site but looking in an emulator this is how it looks

Ipad Landscape

Ipad Portrait

Please try to clear your browser cache and check again.

Thanks

#9

Hi Paul

I did already do that and its still the same - I will see if I can try someone else’s ipad.

#10

Hey @Jimmmmmer,

If the issue still persists on your end. Please tell us what Operating System and browser you’re using. Also give their version numbers. Your screenshot looks like you’re viewing in an old iOS version. If you’ve tested in the emulator like Paul also, your OS and browser might be outdated too. Please ensure you’re using the latest software versions because Flexbox, which is used in the header and footer is not supported in old iOS and OSX version. Please also see what WordPress supports at because generally, themes and plugins follow that standard too.

Thanks.

#11

Hi There

The operating system is Safari however I just tried it on the desktop in Internet Explorer 11 and that has the same problem.

If this is not going to work then can you advise a workaround ?

Appreciate your responses as this website is to go live this weekend.

Thanks.

#12

Hi Me again !

I have had to go back to the standard header provided with the stack as all attempts to get pro header working have failed.

Please could you advise how I can get the telephone number (large text) and two social icons to go on the Right hand side of the topbar.

I have found out how to do the social icons BUT is there a way of changing them to square and in their correct colours rather than just black.

Thanks.

#13

Hi @Jimmmmmer,

I still recommend doing it in Pro header, you already have a content in your top bar and it’s the logo. Adding another text will not fit to that existing layout, because it means the entire top bar has to go full-width which will then push down the social icons. And aligning the content to the right means the layout should go full to the right first.

May I know what issue you’re getting while creating this in pro header?

Thanks!

#14

Hi Rad

IT wont work on internet explorer 11 or on safari 10.3 - header just goes all awry.

I am really gutted as the pro header looked great but I just havent used it enough to know which bits to try and change.

At the moment the website is showing the standard menu but I have save the template of the pro menu.

The site is supposed to be going live this weekend so its all a bit meh !

If I change back for you to see will I lose the standard menu or can I change back to that.

Kind regards

#15

Hi @Jimmmmmer,

I checked and it’s because you added them in one single header bar. The limitation of the standard header is the layout, but in your Pro header, you’re also limiting it on a single layout. And you’re also adding HTML codes that aren’t necessary.

I created a sample so you could see, I also tried it on IE 11. The page name is X TEST.

Thanks!

#16

Hi Rad

Ahh I see what you mean. I originally tried that BUT it looks like two bars together because there is a shadow under the top bar which makes it look aweful.

Is there a way to get rid of that shadow so that it all looks like one header instead of two rows? because if we can do that they I could make it work and change the colours of the socials and of the sub directories etc so it is more like my original one.

Really appreciate your help Rad, thank you.

Kind regards.

#17

Hello There,

The shadows can be remove in the bar settings:

Hope this helps. Please let us know how it goes.

#18

Hi Rad

I have worked it all out. The only thing I cant get right is that I wanted it sticky so the parallax images on the other pages worked BUT it seams to split the bars first before settling down. Is there a way of linking them so they stick together?

In any case I just want to say a MASSIVE THANKS to you for pointing me in the right direction - what a STAR you are.

Thank you.

#19

Hello There,

Since the bars were independent, each bar must reach to the top before it displays as sticky. This is why as you scroll the page, the bar reacts one after the other. There is no way of linking them or sticking them together.

Hope this helps.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.