how to create sticky header in wordpress blog through css

How to Create a Sticky Header in WordPress blog (step by step guide)

Want to make a sticky header in WordPress blog. Many WordPress themes does not have option to add sticky header in blog.

If you are using any free theme, definitely you won’t be having any option to make WordPress blog header sticky.

Than what to do, I have a two step method you can use to get a sticky header in your wp blog.

Follow below step by step process

How to make sticky header in WordPress blog by Additional CSS

Login to your WordPress dash board

Appearance > Widgets

How to add sticky header in wordpress blog

In next window choose additional CSS

how to make sticky header in wordpress blog

In order to Make a header sticky Copy and paste below code in Additional CSS column anywhere.

.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

That’s you have created your header sticky.

If you find your content and sticky header is over-laping.

You can use below CSS to increase gap between your header and content.

#content.site-content {
margin-top: 120px;
}

how to create sticky header in wordpress blog with the help of CSS

I hope this tutorial must have resolved your issue. Best of Luck.

Further Reading

How to create an Email with domain name for free

Leave a Comment

Your email address will not be published. Required fields are marked *