How to disable sticky header on mobile only with CSS in Sparkling theme?

Sparkling
1

Hello.
How can I easily disable sticky header option on mobile devices only with CSS? I want to keep it on deskop browsers.

2

Hi there

Hope you are having a good day and thank you for your question

Add this css code in appearance > customize > additional css:

@media (max-width: 968px){
.navbar-fixed-top {
position: relative;
}
}

Thanks!
Colorlib Support Team

3

Thank you. One step forward :slight_smile:

But now I have a quite a big empty space between page header and the actual page content. Aproximately 70-80 pixels. Any hint how to eliminate that? I would like the content to be sticked to the header, exaclty like before the change with “position: relative”.

4

Good morning

Let me see it, please post url of your website

5

Hi. Sorry, the website is not online yet. I have it locally.

But I found a workaround. I used “absolute” instead of “relative” and the space is gone. The difference is, that with “relative” option the content below the header was moving down dynamically along with expanded menu. With “absolute” option the content below the header always stays at the same position, no matter if menu is expanded or not. But that is ok, I don’t really mind about that.

6

Good morning

Ok, in this case, i will mark this question as a resolved, just let me know if you need anything else in new ticket :slight_smile: