How to Get WordPress Sticky Header in Astra Theme

How to Get WordPress Sticky Header in Astra Theme


Using a sticky header on your WordPress site makes it easy for visitors to explore your other pages and content. Turning on and setting up a sticky header in the popular Astra theme is quick and easy, but it does require that you’re using the paid Astra Pro.

Some of the images associated with the steps are included inline below. All images associated with these steps can be seen in the embedded YouTube video. Also, please note that you’re not able to leave a comment directly on this article. If you have a question or feedback, please leave it on the YouTube video.

YouTube player
Shop Amazon Warehouse deals and save up to 50%!

Steps to Get WordPress Sticky Header in Astra Theme

  1. Navigate to your WordPress home screen, and then click “Appearance” in the menu on the left side of your screen.
  1. Click “Astra Options” in this menu. The Astra Options window is displayed on the right side of the screen.
  1. Scroll down to Available Astra Pro Modules, and click to activate Sticky Header if it isn’t activated already.
  1. With the Astra Sticky Header feature activated, click “Customize” in the Appearance section on the left side of the screen.
  1. Click “Header Builder” in the menu on the left side of the screen.
  1. Click “Sticky Header” in the Header Types section.
  1. Click to toggle on whether you want to stick either the Astra Above Header, Primary Header, or Below Header. Additionally, you can review other options, such as whether you want to apply a shrink effect to your sticky header, whether you want to hide the sticky header when the user is scrolling down, or whether you want to use a different logo entirely for your sticky header. You can preview your sticky header changes in the window on the right side of the screen.
  1. Click “Publish” after getting your Astra sticky header set up how you want it to display on your WordPress website to save your changes.

Reasons to Use a Sticky Header in Your WordPress Astra Theme

1. Improved Navigation

Sticky headers offer quick access to your website’s main navigation menu. This keeps the menu visible as users scroll down the page, making it easier for them to access other sections of the site. This can reduce bounce rates as users spend more time on your site and find what they need quickly.

2. Brand Awareness

By displaying your logo and tagline, a sticky header can help build brand recognition. As users navigate your site, they’ll always see your brand at the top of the page. This repetition helps build brand awareness, making your website more memorable.

3. Increased Accessibility

Astra sticky headers provide an easier way to access important sections of your website. With just a click, users can jump to the section they need, without having to scroll back to the top of the page. This improves accessibility and makes your site more user-friendly.

4. Better Conversion Rates

By making it easier for users to find what they’re looking for, Astra sticky headers can increase conversion rates. The quicker and simpler the navigation, the more likely users are to take action. A sticky header can also highlight calls-to-action, leading to increased conversions.

Reasons to Avoid Using a Sticky Header in WordPress Astra Theme

1. Reduced Screen Space

A sticky header can take up valuable screen space, limiting the amount of content that users can see. This can be especially problematic on smaller screens, such as those on mobile devices. To avoid this, consider using a smaller header or only making it sticky on larger screens.

2. Distracting

A flashy or animated sticky header can be distracting, taking away from the overall user experience. To ensure that your Astra sticky header doesn’t detract from your website, keep it simple and avoid using flashy elements.

3. Decreased Performance

Complex scripting and JavaScript can slow down page load times and negatively impact performance. If you decide to use a sticky header in your WordPress Astra theme, choose one that uses minimal scripting to avoid impacting performance.

4. Reduced Accessibility

A sticky header can make it difficult for users with accessibility needs to use your website. To ensure that your Astra sticky header is accessible, consider using a header that is easy to reach without scrolling and is easily visible for users with visual impairments.

Shop Amazon's Deal of the Day and save up to 50%!

All Tutorial Categories

About Max

Max has nearly 20 years of experience working in IT across three different industries in project management and management capacities: publishing, telecommunications and healthcare. He holds the following degrees and certifications: BS Communications, MA Communications, MBA and Project Management Professional (PMP). His tutorial-focused YouTube channel earned more than 100,000 subscribers in its first four years, and currently has more than 160,000 subscribers, 110,000,000 video views and an insane 2.4 million hours of watch time. Max enjoys learning new technology, reading and collecting comic books, listening to audiobooks and playing video games.

This article contains affiliate links, which means that if you click one of the product links I may receive a small commission. This helps support my content, and enables me to continue creating content like this. Thank you for the support!