Archived topic
Sticky Mobile Header
5 replies · Started by Gary on March 5, 2018
Firstly, apologies if this has been requested before, but I honestly couldn't find the answer I needed, even through searching on Google.
Anyway, I am creating this site http://ronwattdecorators.co.uk
The header image on desktop sticks and the rest of the content rolls over it, although I can't seem to replicate this on mobile, with the header image moving the same as the rest of the content.
Also, I feel that the header image is too deep on mobile and would like to reduce it's size.
So, long story short, I'd like a sticky and smaller header on mobile please.
Many thanks,
Gary
Hi there,
Your mobile header is sticky and looks quite small already? http://www.screencast.com/t/kFKXxtE7sbwA
Am I missing something?
Let me know.
Hi Leo,
I think I used the incorrect terminology, what I meant was Background image header, not just header.
Customising > Background Images > Header
It is fixed on the desktop, but not on mobile, I also feel it takes up to much space on the mobile and would like it to be smaller.
Hope I've managed to explain it better this time?
Thanks,
Gary
Hi Gary,
You could do something like this:
@media (max-width: 768px) {
.inside-header {
padding: 40px;
}
.site-description {
font-size: 30px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
That's great Tom, thank you.
You're welcome :)
