Fix the nav bar at the top while scrolling

Hello,

I’d like to have a sticky nav bar on my website while scrolling on the Front Page. For mobile, I’d like to have the hamburger icon stickied at that top. I tried other code I found in the forums but they didn’t seem to do anything.

Your help would be greatly appreciated.

Thanks!

Hello there,

I hope you are doing well today.

You can use the following CSS code to create a sticky header by going to Appearance > Customize > Additional CSS and pasting it there.

/*Sticky header*/
#header .top-header {
position: fixed;
z-index: 99;
}

Best Regards,
Support

Hello,

That definitely worked in order to stick it to the top, but since the header has a clear background with white text, scrolling to white sections of webpage makes the text really hard to see. Is there any way to change the background only when you start to scroll?

I added the following which works but I see that the padding on top of the header is too much and the background appears all the time; I only want it to change to black when I start to scroll.

background-color: black;

Thanks!

Hi there,
Thanks for keeping in touch with us.

Kindly provide me with a link to your site so that I may have a look at what’s up from there and provide you with some CSS that should fix that issue.

I look forward to your reply :slight_smile:

Best Regards,
Support