How To Create A Free Transparent Header in WordPress using Astra Theme

In this tutorial, I’ll show you a free way to create an Astra transparent header in WordPress.

You’ll also be able to enable/disable the WordPress transparent header on tablet and mobile devices, or simply have a different logo for the mobile header.

To create an Astra transparent header, all you need to do is go to your Astra theme’s customizer and under the Header section, enable the Transparent Header.

Video: Transparent Header in WordPress Tutorial

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Tip: Create a backup of your website before making significant changes to ensure you can restore your site if anything goes wrong during the customization process.

Log into your WordPress website then install and activate the free version of Astra.

Go to Appearance > Customize on your WordPress dashboard, proceed to the Header section then to Transparent Header (00:33)

gV5amWWHKhrxA2jbHHfs eoMDobeW8XZ9bia6CGsaySP XVfOQGFGW4rqiTbTIC4dIMW mi59jrLlML LcW0bKixhSYmD6RKq75AaRIqKy0zNl5lK aX1IZ
P JoLnqUYQJX2AgCCGwJR6qDz3y3q LoHA7PJkYDXvOjFe7eN 18e7zvBU382g3oZ3yQ1xOZFFYCKSjHmOZJANqId9t1nm9GTR8p CAMSg10h6nwVJQzCHxs ThfkcjGq2UcuCRP

Here you have the option to display the transparent header on your entire site, check this option, and you can enable it on either desktop, mobile or both.

Select both desktop and mobile. Leave everything else on default. 

You also have more options to choose from depending on how you want your header to look.

For example, you can disable it on 404, disable it on the blog page, etc.

To read: How to Create a Top Header and Below Header using Astra

VDAboRk5xmpeT6L Y8H12Plidrw0VAMnLRd5Xoeq4UGEvmkBiUIxJYT8O uFq nuZXGdudAHn0DEv bwnJ754UY AKa0WB5WQBc0ovF8vnLhqErWvwn5YcaJPlhDcEdBhwCNZ Xb

In the Colors & Background section; choose a background for your header, then give it a small tint (01:53)


Under Site Title, give it a white colour, and leave it at default (no colour) on Hover.

Under the Menu option; set white for the Link/Text colour, if you want you can add a background colour, though in this case, we’re not using one.

On the Hover option, choose another colour under the Link Active/Hover colour (03:06)

Rfef9KrJga9z OWaGOwRtX g zOsUBu

Go to the Submenu option; set a background colour for the submenu items (like white with a tint).

Next, go to Link/Text Color and give it a colour of your choice, then on Hover, choose a different colour (04:23)

u96ivVPI71dFXUj0xI13JOTmB85 uklxttvJfA0bCLpOhhnQJiBcqZWbKYi79nUzA4DYfIwlRzgJXDiMdrrQmwB4uixZt7JNtc2Zd

When you’re done, click the Publish button, then reload your page to preview the changes.

transparent header in wordpress

Back to your Customizer, change the Enable On option to Desktop only so that the transparent header only appears on the desktop, but it remains a normal header on tablet and mobile devices.

To Read: How to Create a Sticky Header Using Astra Theme

how to disable transparent header in astra

To disable transparent header Astra; go back to your Astra theme customizer via Appearance > Customize then find the Header or Header builder and toggle off the Transparent header option.


Why would I want a transparent header on my WordPress site?

A transparent header can provide a modern and sleek design, allowing the background to show through the header.

It’s often used to create a visually appealing and seamless integration with the website’s content.

Is the Astra theme free?

Yes, Astra offers a free version with basic features.

However, there is also a pro version which includes additional advanced features and customization options.

How can I install the Astra theme on my WordPress site?

You can install the Astra theme from the WordPress dashboard by going to “Appearance” > “Themes” and clicking on “Add New.”

Search for “Astra,” install, and activate the theme.

Can I customize the transparent header after importing a template?

Yes, after importing a template, you can customize the transparent header and other elements using the WordPress Customizer.

This allows you to adjust colors, fonts, and other settings to match your preferences.

In closing

Thanks to Astra’s flexibility and customization options, creating a free transparent header in WordPress using the Astra theme is a relatively simple process.

If you have any questions or comments, let me know in the comments section below, and don’t forget to subscribe to my newsletter and YouTube channel for more of these tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users