How to deactivate header on mobile device only

Hey there! Thanks for your question. There’s not a way to hide the header template part out of the box but you can do this with Custom CSS. For example, the following CSS hides the header template part when the screen size is smaller than 768px on my test site:

@media only screen and (max-width: 768px) {
header.wp-block-template-part {
display: none;
}
}

Note: you might need to tweak the above to work for your specific site. You’ll want to add this CSS in the Custom CSS section of Styles as described in this support document. You can also use the Command Palette to get their faster by. Just use the keyboard shortcut?Cmd+kon Mac or?Ctrl+k?on Windows to activate it?and start typing “CSS”.

Hope this helps!

P.S. I am also a huge admirer of the lovely Julie Andrews. What a great site.

Hello @annezazu

Thanks for your compliment on our website!

And yes I managed to get this work!

Our fans who complained about the look on their phones will be super happy!! I sure am happy with the result!

Thanks very much!

Fantastic to hear! I just checked and can confirm it’s working great on my end.

Happy WordPress-ing ??