Categories
CSS

How to keep the header static and always on top while scrolling with CSS?

Spread the love

Sometimes, we want to keep the header static and always on top while scrolling with CSS.

In this article, we’ll look at how to keep the header static and always on top while scrolling with CSS.

How to keep the header static and always on top while scrolling with CSS?

To keep the header static and always on top while scrolling with CSS, we can set the position style to sticky.

For instance, we write

header {
  position: sticky;
  top: 0;
}

to set the position of the header to sticky.

And we set top to 0 to keep it on the top of the page.

Conclusion

To keep the header static and always on top while scrolling with CSS, we can set the position style to sticky.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.