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 –

Let’s see how this works:

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

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

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

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 is seen.

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.

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 🙂

10 thoughts on “Advanced Headers – Create Beautiful Page Titles, Transparent Headers and much more!”

  1. 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. Yup, we’ve a few improvements lined up for future release. Just to cross check, what kind of additions would you like?

    1. 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. 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. 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. Nikhil Chavan

      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. 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.

Leave a Comment

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