How do I make my header sticky in WordPress Astra? Is this your question, and want to learn how to activate the floating header on your site? You arrived at the best place to learn about the Astra sticky header.
In this tutorial, let me explain how to create a sticky header with the free Astra theme and also for its Pro version. As the floating header is always visible to your visitors, you can grab their attention by providing valuable information.
Let’s get into the details!
1. How To Add a Sticky Header in Astra Free?
The free Astra theme has no settings to enable the sticky header. Follow the below steps to include the CSS codes.
Step 1: Go to your WordPress Dashboard > Customize
Step 2: Click the “Additional CSS” section
Step 3: Add the following CSS code in that section.
.site-header {
position: fixed;
width: 100%;
}
.site-content {
padding-top: 75px;
}Step 4: Click the “Publish” button after adding the code. That’s it! You have fixed the floating header in the free version.
2. How To Add a Sticky Header in Astra Pro Version?
I assume that you installed the Astra Pro plugin to fix the On-scroll fixed header. Now, follow the steps!
Step 1: Click “Dashboard” under Astra options in the WordPress Dashboard. Enable the Sticky Header option (shown below).
Step 2: Go to Customize (Under Astra Settings) and click “Header Builder.”
Step 3: Click “Sticky Header”
Step 4: You must enable the “Sticky Primary Header” and click the “Publish” button.
In the screenshot above, you can see the other settings to improve the Astra sticky header. Let me explain them.
Stick Above Header – This section is just above your primary header for buttons, special content, or menus.
Stick Below Header – It is the space to add extra menus
Enable Shrink Effect – If you have a large primary header and want to shrink its size while scrolling as a stick header, use this option.
Hide When Scrolling Down – It hides the Astra sticky header when your readers scroll down the page. When they scroll back, the header will be displayed. This feature will work only when the “Stick Primary Header” option is enabled.
Different Logo for Sticky Header – You may add a different logo for your sticky header instead of your site logo by uploading a new one. Here, you can further add
- Different Logo for Retina devices
- Sticky Logo Width
If you want to add some effect to your sticky header, select the Slide or Fade option. Besides, it is possible to enable it for particular devices like Desktop—mobile or both.
Frequently Asked Questions
What Is Sticky Header Astra?
The sticky header fixes your site header at the top of the webpage when visitors scroll down/up your website. Here, you will get quick access to the navigation menu, improving your user experience.
Are Sticky Headers Good or Bad?
The sticky header is always visible to your readers and is a good feature. When you offer valuable data in the site menu, it gently pushes your readers to check the details you provide. This activity may lower your site bounce rate, which is good for SEO.
How Do I Turn On Sticky Headers On Astra Theme?
As I explained in the tutorial, you must add CSS codes for the free Astra theme version. If you purchased the Pro version, you have several choices to make your site header sticky. I added a screenshot of Astra’s sticky header settings.
How To Create A Floating Menu On WordPress?
Creating a floating menu at your fingertips will speed up the user navigation. If you have installed the Astra WordPress theme, please follow the tutorial in this blog post. For the Divi theme, check my blog article.
Wrapping Up The Making of Astra Sticky Header
Astra is one of the top page builder themes for WordPress. The sticky header is available in its Pro version! You should check the Astra free Vs pro comparison to understand the premium features of this highly customizable theme.
When you use the free theme version, you may either add the corresponding CSS codes (Given in the above tutorial) or use the Elementor Pro plugin to enable the sticky header feature.
However, I recommend the paid version of the Astra theme to complete the job in 1 click. As you can see, the Astra sticky header settings contain impressive options to make an attractive floating header to expedite user navigation.
