Easy Way to Create Transparent Header with Divi!

by | Jan 22, 2021

This post may contain links to products that I may, at no cost to you, earn a commission from. I only recommend products I use or support myself. For more info check here. Thanks!

Seamless Transparent Headers

We have all seen those cool navbar headers on websites that seem to blend in with the background.

What makes those headers so cool is that the header blends in seamlessly with the Hero section.

But can you make a transparent header in Divi?
When you are first starting out with Divi, or even WordPress in general typically the theme has a visible section above the Hero where the Header lies. While again this looks good on some sites, you may not want that header to be visible.

Something that makes transparent headers great are the the aesthetics it may bring to your site. It removes unnecessary padding to the site and helps the site flow better. Although, on the flip side, if implemented incorrectly it can confuse the visitor and quickly make them bounce.
Most of Divi’s themes come with a header that sits above the hero section of the website.

You will notice here that above the Hero section the navbar header is sitting above

But, what is great about Divi is that this is not difficult to implement a transparent header.

(Shameless plug) This is my web design website that has a transparent header that is part of the Hero section

With the Divi Builder and the excellent Modules they provide, it really only takes a few clicks here and there to get going. No code needed.
In this post we are going to look at how we can create a transparent header overlay that lies right on top of the hero section.  As a bonus, I will also show you how to create a transparent fixed header for your site!

Transparent Header

First things first create a new page for this example. I created a test page for this example. The Divi premade layout I used for this example is Hosting Company Services Page. You don’t need to do anything to the page as we are not concerned about the page just creating a header for said page.

You can find this as part of the free Divi Layouts that come with your subscription. Notice that most of the Divi layouts come with a header that is above the hero section

After you have loaded up the page, save it and go back to your dashboard. As I mentioned in my last post, I find it best and easiest when working with the Builder to open the page I am editing with one tab and have the Builder open in another page, that way as I go along I can check on the adjustments I make to the page.
With that out of the way, go ahead and go to Divi > Theme Builder.

See that aesthetically pleasing and perfectly circled area? That’s where you’ll find the Divi Theme Builder…you’re welcome.

Click on Add Custom Header. You have the option of either adding this header as a default Global header for the entire site or you can use your custom header on specific pages only.  For this example we are just going to make it global, because it’s the only page.

So for example, let’s say for your main page you want to display the Home Menu, but on the blog posts you want a different menu that takes the reader back to the blog post pages, or back home, you can create a custom header for those specific pages and add the menu you want.

Once you have selected your Custom Header, and the parameters, the Divi Builder will now open and give you the typical 3 options: Start from Scratch, Pre-made Layouts, or Clone an Existing Page. Go ahead and select Start from Scratch.

This is where the magic happens. The possibilities are endless as Divi affords you many opportunities to let your creativity flow.
  • Firstly, Create a Section.
  • In the Section Settings, under Design set the Margin to 0px Top and Bottom and the Padding to 1em Top and Bottom.
  • Next Create a Row with 3 equal columns. Remember, you can always go back and edit this later, but for now I am just showing you an easy way to create a transparent header.
  • In the 3 rows, add an Image, Call To Action or Button, and a Menu Module.  (If you haven’t set up a menu for this example that is quite alright, for the purpose of this example just add a Text module and write down Home About Contact. Again it’s about the header not the content.)
Notice a few things here: I have yet again shamelessly plugged in my website design business by adding the logo there, and I have also just added the standard button module (alignment: center) and the Menu module (if you have any pages already you can easily create a menu for this but again if not just create a text module with a few words).
  • Next after adding all 3 modules head to the Row Settings.
  • Under Design click Sizing and put width at 100% and Max Width to 1080 or 1440px (whichever you prefer).
  • Under Spacing set Margin and Padding both Top and Bottom to 0px.
  • Save and head back to Section Settings.
    Now this next part is super easy!
  • Under Section Settings head over to the Advanced Tab and go to Position.
  • Under Position select Absolute from the dropdown menu.
  • Save and then go back to your site hit refresh…

And voila! Transparent overlay header for your hero image!

And there you go a transparent seamless full page header

Now you can go back and customize your header to you and your sites liking!
Pretty easy right? Divi puts all that power right at your fingerprints and you don’t even need to write any code.

Transparent Header that Changes Color on Scroll

Now if you are wanting to do something a little more advanced such as have a fixed header than check out this bonus I have for you!
You are going to do all the things you have already done, but instead of putting your Header as Position: Absolute you are going to set it as Position Fixed under the dropdown menu.

So now when you go back to your page the header will stay fixed at top of screen!

Which…totally gets in the way of everything else…Well that’s not very good!
So for this example we will need to utilize the power of Divi and write a little bit of code for this to work.


I want to thank Pee-Aye Creative for showing me how to do this! Go check out the blog here!

Transparent Header with Background on Scroll

In the Advanced tab, after you have set the Position to Fixed, scroll down and set Z-index to 999, this just makes sure it stays above everything else. While not absolutely necessary, this just ensures everything works properly, because technology.

Then scroll back up to CSS ID & Classes.

Write down ‘tranparent-header’ and then Save. Go to the Divi > Theme Options and then scroll to Custom CSS.

You will find the Custom CSS under Theme Options if you scroll all the way down

In Custom CSS copy and paste this snippet:

/* set the default background color of the transparent header section */
.transparent-header {
	background: transparent;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
}
/* set the background color of the fixed header when scrolling */
.transparent-fixed-header {
	background-color: #000000;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
}

Then scroll back up to Integration

Under Integration you will put Javascript here in the header

In the section titled: ‘Add code to the <head> of your blog’ put this little beauty:

<script>
	jQuery(document).ready(function(){
		jQuery(window).scroll(function() {
			var scroll = jQuery(window).scrollTop();
			if (scroll >= 100) {
				jQuery(".transparent-header").addClass("transparent-fixed-header");
			}
			else{
				jQuery(".transparent-header").removeClass("transparent-fixed-header");
			}
		});
	});
</script>

What does this do you may ask?

Well, it creates function for scrolling, and when the page loads it makes the header transparent. Then as you start to scroll it turn the header into the color chosen in the code, which for this purpose we selected black or #000000.


Again many thanks to Pee-Aye Creative for this cool tip, go check out the blog for more cool tips!

Conclusion

Alright well there you have it the building blocks for your transparent header.
Go ahead and edit the header make it more to your liking and what works for your site!

Hope you enjoyed this tutorial and if you have any questions, remember to drop me a line!

Don’t forget to check out Divi and start creating visually stunning websites!
Thanks for reading and don’t forget to sign up so you can be notified when there is a new post!

Divi WordPress Theme

Need a website solution that turns your visitors to customers?