[Support request] Mobile header and related issues

[Shaun]

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

[Fernando]

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.

[Shaun]

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

[Fernando]

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!

[Author]

Posts