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