[Resolved] Sticky Mobile Header

[Gary]

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

[Leo]

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.

[Gary]

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

[Tom]

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/

[Gary]

That’s great Tom, thank you.

[Tom]

You’re welcome 🙂

[Author]

Posts