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


In this tutorial, I’ll show you a free way to create a transparent header in WordPress using the Astra theme. You’ll also be able to enable/disable the transparent header on tablet and mobile devices, or simply have a different logo for the mobile header.

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.

Video: Transparent Header in WordPress Tutorial

Log into your WordPress website. Make sure you install and activate the Astra Theme.

Go to Appearance > Customize, go to the Header section then to Transparent Header (00:33)

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 or on 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

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, 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)

Go to the Submenu option; set a background colour for the submenu items (like a white with a tint), then go to Link/Text Color and give it a colour of your choice, then on Hover, choose a different colour (04:23)

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 just remains a normal header on tablet and mobile devices.

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

In closing

That’s how you can use the Astra Theme to create a transparent header and customize it for your WordPress website.

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

Leave a Comment

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

Reccomended Tools

Get Web Hosting from the best as recommended by

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

Featured In

New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG

Get My Free WordPress
Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design journey.

Intermediate and advanced WordPress users have found it helpful too.

By joining my list, I promise you’ll never be spammed! 🙂

cropped img of the toolkit