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.

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.