Make Header Sticky in WordPress works on All Astra Themes

Are you using one of Astra theme? It’s header is not sticky.
Do you want to make the header of your WordPress theme sticky?
Below code will help you to do this.
Copy below code.

/Make Header Sticky – for Astra prior to 3.0/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}

/Adjust Content Padding/
.site-content {
padding-top: 75px;
}

/Adjust Content Padding for Mobile/
@media (max-width: 800px) {
.site-content {
padding-top: 175px;
}
/Stick the Off-Canvas Navigation Menu – Adjust Top Margin for your Layout/
.main-navigation {
position: fixed;
margin-top: 0px;
}
}

/Adjust Content Padding for Mobile/
@media (max-width: 650px) {
.site-content {
padding-top: 200px;
}
/Stick the Off-Canvas Navigation Menu – Adjust Top Margin for your Layout/
.main-navigation {
position: fixed;
margin-top: 60px;
}
}


Click > Appearance (left side menu) then > Customize
Scroll down left side menu, there is an option for ‘Additional CSS‘ to put extra CSS code.
Click here and paste the css code that you have copied above.
Then Publish it.
You have to adjust its ‘padding-top’ as your theme’s view for desktop, tablet & mobile.

Leave a Comment

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