NOTE: this tutorial shows you how to create a Beaver Builder Transparent Header and is designed to work specifically with the Beaver Builder Theme, although the principles discussed still apply for other themes, including but not limited to Genesis Child Themes or those themes from Theme-junkie. Please let me know if you’d like help with implementing this with another theme.
What is a transparent header section?
A design aesthetic that I have been implementing in my recent client projects such as www.parentsfirstaidcourses.com.au is what I call the Transparent Header (although I am sure there is a technical term for it out there in the design world as Transparent header is quite ambiguous).
What I’m referring to is something similar to the below where the top row (i.e. the picture of the kids with the text over the top) is positioned behind the header (i.e. the company logo, main navigation and social media).
Again, you can click here to preview the actual website and see exactly what this tutorial is going to help you achieve.
Here is another website where I have used the transparent header effect for the design.
There’s many ways to skin a cat, but in my eyes one way is better than the others
TIP! This transparent header technique for pages is all ready to go in our child themes below.
My preferred technique for creating a Beaver Builder transparent header
Step #1: Edit your new page with Beaver Builder
Just as you would with any page you are editing, go to your WordPress Dashboard, then click on Pages > Add New and create your new page. Then, click Page Builder to launch the Beaver Builder Page Builder editing mode. Once complete, you will see something similar to the below.
Step #2: Add the content for the top section that the header will sit over
Use the builder to add a row, set your background image / colour, and place the elements you’d like to have in this top row.
NOTE: We will refer to this new row up the top that the header will sit over as the TOP BANNER for this tutorial.
- Do not worry about setting the padding and margins on the rows / modules here. We will do this in the next steps. Here we are letting the margin / padding values that are set in the Beaver Builder Page Builder > Tools > Global Settings take affect
Step #3: Add a class to the top banner row
To do this, over over the top banner row (i.e. the row the header will sit over) and click the spanner icon on the left. Next, click on the ADVANCED tag and down the bottom add a CSS class. I always use top-banner as it makes sense to me semantically.
Then, click the SAVE button.
We will use this class for some CSS we will write (don’t worry, it will be very easy if you’re new to CSS!).
Step #4: Make the header transparent
So now, we’re preparing to move the Top Banner row under the header. But first, we need to make the header transparent. We do this now so that we can see where the top of the Top Banner row ends when we are using CSS to position it under the site header.
You can add this following CSS either in your theme’s style.css if you are familiar with CSS, or in Beaver Builder itself. To add it in Beaver Builder itself, edit a page using Beaver Builder and once in the editor, go to the top right and click Tools > Global Settings and copy the below into the CSS tab.
CSS CODE TO ADD:
Once that code is copied, you may or may not notice a change, but please continue – you’re nearly there!
Here is what the above code is doing and why we’ve added each CSS property:
- body .fl-page-header-primary: we are targeting this item with CSS as this is the HTML for the header that the Beaver Builder Theme uses for the header content. We add the body in front so it has what is called higher specificity. You can click here to read more about specificity if you’re new to coding.
Another important thing to note here is that we target the fl-page-header-primary element, as when you set a fixed header in the customizer, it actually makes a copy of the header and names the newly copied header created for the fixed menu fl-page-header-fixed. We don’t want to target the fl-page-header-fixed as they you will not be able to see the fixed menu as you scroll down the page.
- background:transparent: we are removing the colour that is set on the header element. If you are using the Beaver Builder Theme, we are overriding the colour that is set when you go to your WordPress dashboard and click on Appearance > Customise > Header > Header Style > Background Colour.
IMPORTANT NOTE: you should still set a background colour here in the Customizer, as this background colour will be used for smaller devices. It is also the background colour your header will have if you set your header to be Sticky on scroll in Appearance > Customise > Header > Header Layout > Fixed Header.
- position:relative and z-index:10: together, these ensure that our header will sit over the top of our top banner row when we use CSS in the next step to pull it up under the header.
Step #5: Move the top banner row up underneath the now transparent header
Add the below code into the same place you added the above CSS to move the top banner row up underneath the header.
Here is what the above code is doing and why we’ve added each CSS property:
- @media screen and (min-width: 993px): This is a media query and you can read more about media queries here if you wish to learn them. Now, this 993px value is very important and something you may or may not need to change. This is the size of the browser in px that you want the top banner row to slide up under the header and have the transparent header effect. Out of preference, I arbitrarily decided that I wanted this transparent header effect only on larger devices, which I have defined in my Global Beaver Builder Settings to be anything larger than 992px (well, I have declared my medium device breakpoint to be 992px so here I have said anything larger than 992px = a min-width of 993px).
- .top-banner .fl-row-content-wrap: When you edit a row in Beaver Builder and add padding to a row, it actual adds this padding to an inner element of the row you are editing which has the CSS class .fl-row-content-wrap. With is code, we are overriding the row’s top padding value to our own to help push the content down and under the header.
- margin-top:-115px: You will most likely need to change this. Edit this value until the top of your top banner row (the row that will sit behind the header) goes to the very top of the page). you will see that the content of your top banner row may overlap with the header at this stage and look messy. The next step will fix this.
- padding-top:200px: This pushes the top of the top banner row content down so that it does not overlap the header content.
- padding-bottom: This, like the above padding value, overrides the default padding set for the row on devices greater than 992px. Adjust this till you are happy with how the top banner is spaced out on larger devices.
As this code sits in the media query @media screen and (min-width: 993px), the padding and margins we are setting will only override the default padding and margin for the top banner row on larger devices, and will revert back to the default values set on devices under this breakpoint. That’s the beauty of this method!
This is the result so far.
As you can see, looking pretty schmick, eh? Now, we just need to make the content in the header stand out.
Step #6: Edit the header so that the menu and logo all look good with the new top banner row underneath
Go to Appearance > Customise > Header > Header Style and edit the values. Here’s what I have set for this tutorial.
Now, the changes you make to the text colour, link colour and other colours will show on the preview on the right, but the background colour will not. This is because the CSS we added in the previous step to make the header transparent is overriding the values we set here for the background (this is what we want – it’s working! Yay!).
To preview your changes to the background of the header, scroll down the page a bit until the fixed header appears. Now, any changes you make to the background of the header can be previewed live.
When done, click the blue SAVE button in the Customizer.
[clickToTweet tweet=”I’m building a transparent header for my #BeaverBuilder website!” quote=”I’m building a transparent header for my #BeaverBuilder website!”]
How to use this through your whole site
Saved Rows! Introduced in Beaver Builder lately was the ability to created Saved Rows!
Here’s what to do:
- Edit the Top Banner row we have created and click the spanner icon on the top left of the row. Then, click SAVE AS, give it a name and click SAVE! NOTE: Do not make it a GLOBAL ROW.
- Create a new page, and from the side under the SAVED ROW section, drag your newly saved row in and wa-la! – you can reuse this effect.
TIP! Want to change the amount of spacing on all top banners through your whole website? Just edit the padding we set in step 5 and it will update on all pages. Neat, huh?
Common Problems and Fixes for this tutorial
- I cannot see my header on tablets and mobiles using this method: If you are seeing something like the below, you just need to go to Appearance > Customise > General > Background and set a background colour that contrasts in colour with your header elements so they stand out. I usually like to set this as the same colour I used for the background colour of the header in Step #6.
- The top bar of the header is hidden: If you are using the Beaver Builder Theme’s Top Bar element (added through your WordPress Dashboard > Appearance > Customize > Header > Top Bar Layout), you will need to adjust the CSS you’ve already added to include body .fl-page-bar. Basically, like the header, we are pushing the top bar element ABOVE the top banner row as is currently underneath the top banner row. IMPORTANT: notice the commas in the below code snippet as they are important.