Archived topic
Tablet page header issue
11 replies · Started by Lynn on October 17, 2018
Hello,
I'm still using 1.6.2 as the plugin hasn't updated and doesn't show an update.
My question concerns how the logo shows up on a tablet. Basically the logo floats to the right. This works well on desktops and on mobile (phone). On tablet, in this case iPad, the logo is more towards the centre. I imagine it's because of some custom css for mobile positioning that I used - as follows
#mobile-header .site-logo {
position: absolute;
left: calc( 130px); /* 50% from the left - half your image width */
}
Is there a way that I can get the logo to float right on tablet as well as elsewhere?
Thank you.
Hi there,
First of all I would highly recommend updating the premium plugin. Make sure auto update is activated:
https://docs.generatepress.com/article/updating-gp-premium/#activating-updates
As for the mobile header logo CSS, remove what you have and try this instead:
#mobile-header .site-logo {
order: 2;
margin-left: auto;
margin-right: 0;
}
.mobile-header-logo #mobile-header .menu-toggle {
order: 1;
}Let me know :)
Hi Leo,
Thanks for the code you suggested and for your quick reply. I did try it in Additional CSS in the Customizer. In the previews within GeneratePress it worked quite well. However, on my iPad, in vertical orientation, the logo and the menu when opened moved so far to the right as to be totally off screen. I must say that my iPad is very old and this may be an issue. Any other suggestions?
I do have one other issue. That is, when viewing the site on my android phone in horizontal orientation, when I open the menu I am unable to scroll down to see all parts of the menu. I have experienced a similar issue on other sites in which I have used GeneratePress. Is there a way to fix or deal with this?
Lynn
I'm still seeing your original code added:
#mobile-header .site-logo {
position: absolute;
left: calc( 130px);
}Can you try removing it? Don't think you need that.
As for the second issue, I would recommend our slideout navigation as you have many menu items:
https://docs.generatepress.com/article/activating-slide-out-navigation/
Yes, when I saw that the new code caused the logo and menu to go right off the iPad screen, I removed it and put the original back. I can take it off and put the new code back if you want to see what happens.
And yes, I will take a look at the slideout navigation.
Thanks Leo.
I'm still seeing the old code being added.
Will need to see without it.
Let me know :)
Hi Leo,
I removed the old code and added your code.
Lynn :)
I don't see any issues now?
Checked using browser resize and my iPhone.
Yes, no issues using browser resize or my Samsung Galaxy AS5 phone. But I also have an old iPad OS version 8.4.1. On it, in vertical orientation, the logo is off the screen on the right and the the menu, when clicked open, also goes off the screen on the right. Wondering if it is doing the same on other iPads.
Just checked on my super old iPad OS version 9.3.5 and not seeing the issue as well.
Not as old as yours though but I wouldn't really worry about it.
Ok, thanks Leo. Have a good rest of the day.
No problem!
You as well :)
