Unresponsive Header for Mobile Use

Hi @jodie777

Thank you very much for using my theme.

It is loading on mobile you just need to close the “newsletter” popup you have installed on your WordPress, please see screenshot url below. I can see you are not following the logo instructions (width + height) therefore you will find some styling issues.
https://share.getcloudapp.com/ApuAoxgW

The font is nunito-sans https://fonts.google.com/specimen/Nunito+Sans – you will need someone with css knowledge to change the font type or probably there is some plugin that may change the font type for you.

Best,
Nuno

• This reply was modified 4 years, 4 months ago by Nuno Sarmento.

You could probably tweak the style with this code below – add the code below to Themes -> Appearance -> Custom CSS :

@media only screen and (max-width: 600px) {
.hamburger-box {
margin-top: 33px;
}
}

Hi,
thanks for your response.
What is the custom CSS meant to change sorry?
I don’t notice any difference.
I have changed the blog title image to a header instead of a logo, with the recommended dimensions.
And I think have removed the subscribe pop-up from the top of the screen.

Now the only difference on mobile is that the blank space at the top isn’t quite as large as it was before.
Any thoughts?
https://share.getcloudapp.com/DOuAyqyq

Hi,

You can’t see the image because you are not using a png file for your logo/header. The file is converted to webp and webp files wont work. Most probably you are using optimisation plugins such jetpack or any other for images. Turn off your plugins and try again.

Hi, I can confirm my header is a png, that is how I exported it from Adobe Illustrator.
I have also deactivated Jetpack and any plugins I could find that mentioned optimisation or images.
Have you got any other suggestions?
Sorry, I just can’t get this problem to go away.

it is png but because you are using optimisation plugins it is converted to the webp, did you turn off the plugins and try again ?

Please see screenshot attached:
https://share.getcloudapp.com/12uN8oeD

Try to save your image from the link below and you will see what extension comes:
https://www.everydayimbuffering.co.uk/wp-content/uploads/2020/07/cropped-header2-1.png

• This reply was modified 4 years, 4 months ago by Nuno Sarmento.
• This reply was modified 4 years, 4 months ago by Nuno Sarmento.

Site Kit by Google plugin is not disable, I can see it. Disable ALL plugins and try again.

• This reply was modified 4 years, 4 months ago by Nuno Sarmento.

thank you for this. If I disable all plug-ins will I have this problem in the future if I re-activate them?
I have now managed to get the header visible on mobile, so thanks for this.
My only issue now is that the image is cropped.
Is this easily fixed?
https://share.getcloudapp.com/JruLBx4e

You need to activate one by one and see which one is causing the issue, I believe is the Site Kit by Google plugin but I could be wrong.

To fix the crop image on mobile do the follow.
Go to Themes -> Appearance -> Custom CSS and add the code below:

@media only screen and (max-width: 600px) {
.header-image {
height: 45px !important;
}
}

This should fix your crop image. if you are happy with theme please don’t forget to leave a theme review ?? x

This is perfect…thank you so much!
I will leave a theme review for you no worries x

Thank you.