Advanced Headers – Create Beautiful Page Titles, Transparent Headers and much more!

We’re back with an amazing update for the Astra Pro plugin 🙂

This time, we are introducing a new add-on called Advanced Headers. What this does is essentially allows you create really beautiful page & site headers. Here are some examples –

header example
header example 2

Let’s see how this works:

Once you are on the “1.0.0-beta.7” or greater version of the “Astra Pro Addon” plugin, you should see a new add-on available.

Astra page header module

If you enable it, you should see a menu option where you will be able to create new page headers.

Adding new page headers in Astra

When you create a new header, you should see three main settings: “Page Header”, “Site Header” and “Display Rules”

Astra page header options (old)

Site header is basically the global header of the site where we mostly keep the logo and main primary navigation of the website. And the Page Header is of a particular page where the title of the page, breadcrumb, etc are seen.

Page Header layout

In the display rules, you can target the areas of your site where you want to particular header to take effect. If you’re a Beaver Themer user, the settings will be familiar to you as we’ve used code just from that amazing plugin.

Astra page headers display rules

In this fashion, you can create different headers for your site and apply them on areas you want. Just to give you some hints, the Advanced Headers add-on will allow you just some of the following things:

  1. Design Beautiful Transparent Headers
  2. Have Different header for different areas on your site
  3. Create Dark & Light color tones of the headers so you can use them flexibly on suitable pages.
  4. Different navigation for different user roles
  5. Add Parallax background image
  6. Add SEO friendly breadcrumbs

Go ahead, try out this add-on and let us know how do you find it!

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

14 comments
  1. Nick Profile Pic

    Facing an issue when I use the transparent header with white text. I have no background selected (clear), but when it goes to mobile the background is white – meaning I can’t see my menu. Any ideas how to fix (without changing text colours)?

  2. Sujay Pawar Profile Pic

    Yup, we’ve a few improvements lined up for future release. Just to cross check, what kind of additions would you like?

    1. Sujay Pawar Profile Pic

      I think it will need some custom CSS. If you need help, please get in touch with our support and we will be glad to take a closer look at your requirements and help.

    1. Team Astra Profile Pic

      We have added this to our list to get this fixed in the next update. Right now the shop page does not work in the target settings for page header/custom layouts.

  3. Mauro Profile Pic

    Hi, I ve been using Sydney theme so far, I watched some tutorials about Astra pro but none of them answered my curiosity. Can I setup the header so that it is transparent only in desktop mode, but it keeps the background on tablet and mobile? Thanks

    1. Team Astra Profile Pic

      Right now the transparent header makes the header transparent on the desktop as well as mobile. If you contact support we can give you the CSS that will disable the transparent header on mobile.

  4. Lucas Summer Profile Pic

    This feature is awesome. I have a need currently to have an entirely separate header and top bar for a specific page. Currently you can change the menu but not logo, site title, etc. as you can in customizer. I know it can be done using custom layouts if I were using elementor for the header but I’d like to stick with Astra’s header options.

    1. Team Astra Profile Pic

      Hello,

      If you haven’t yet done so, could you please open up a ticket at our support center, so that we can take a look at your requirements and help you asap?

      A couple of screenshots, etc. will help us understand your needs accurately.

Leave a Comment

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

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top