Archived topic
Mobile header and related issues
3 replies · Started by Shaun on June 6, 2022
Hi
I am working on a staging site https://holidayparks.websmall.net/ and I am having trouble with the mobile header, navigation and the container underneath. With all the below issues, I have cleared LS Cache. Specifically:
1. The size of the Header/Navigation doesn't fit well on mobile. I have tried adjusting the Header font size (mobile) from 19px to 12 px. It looks like it has worked in the 
. However, when I visit the site on my 
, the font size hasn't changed at all.
2. When I start to 
the font size size gets even larger.
3. I have tried a few samples of code to reduce the size of the SVG logo (from this forum) to no avail. Any ideas on how to reduce the SVG logo on mobile.
I also have a Soliloquy under the header in a container (min-height 200px - the height of the photos), but:
1. Even though it appears in the mobile Page preview, it doesn't initially appear when viewed on the iPhone (see image in point 2 above).
2. After about 10 seconds the 
(BTW the JS script is not delayed).
Any help on any or all of the above points is very much appreciated.
Thanks
Shaun
Hi Shaun,
I see. As a first course of debugging, can you try #1 here starting with optimization/caching plugins: https://docs.generatepress.com/article/debugging-tips/
It would be good to take a back up of your site before doing so.
Kindly let us know how it goes.
Thx
My remaining question is how to resize the SVG logo on mobile. The snippets of code I have found elsewhere on the forum haven't worked.
Cheers
Shaun
The size of the image on mobile is linked to the Menu item height in Appearance > Customize > Layout > Primary Navigation.
If however you want to modify this independently on mobile, here’s a CSS you may try adding in Appearance > Customize > Additional CSS:
@media (max-width: 768px) {
.site-logo img {
height: 30px;
}
}Kindly modify 30px with your preferred value.
Hope this helps!
