Tech– A Sticky headers for the Astra theme is available for pro version only, but you may not worry, you can still create sticky header on your website with its free version.
Astra theme is considered the best among free WordPress theme offered out there.
The theme is not only lightweighted, but easily to customize. You don’t need Tech expert skills to use this theme since it doesn’t require you to add a lot codes.
Furthermore, it has many features that you can adjust to your website effortlessly.
But despite having thoses features, its free version doesn’t give you Sticky Header. So you must find an alternative to make sticky header works on your website.
Create Sticky Header for Astra Free WordPress Theme Using CSS Code
Adding CSS code to custom/additional CSS field is an alternative for you to have a sticky header in free Astra theme.
To add it, you can click Customize > Additional CSS. Copy and paste the following 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;
}
}Adjust the code with your customizer setting
After adding the code, view your website and adjust the padding if it suits to your Customizer setting.
You May Read: How To Create Sticky Header for OceanWP Free Theme
The code above is the latest CSS code to create Sticky header for Astra free theme. It has adjusted to the off-canvas mobile menu website, so when it is clicked, the drop-down menu appears to be integrated with the header.
This trick might be helpful for you to create Sticky for Astra free theme. Still, we recommend you to buy the Pro version.
