6 Easy steps to making a Beaver Builder transparent header with the Beaver Builder Theme

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.

[products ids=”1202″]

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.



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:

  1. 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.
  2. 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. 
  3. 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:

  1. @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).
  2. .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.
  3. 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.
  4. padding-top:200px: This pushes the top of the top banner row content down so that it does not overlap the header content.
  5. 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:

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

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


Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

34 thoughts on “6 Easy steps to making a Beaver Builder transparent header with the Beaver Builder Theme”

  1. Much cleaner method than what’s posted on BB, thanks for this. I have a question with respect to clip-path and the transparent header not showing.

    I’m using the following:
    fl-builder-content .top-banner {
    background: #C5DF48;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
    clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
    overflow: hidden;

    I’m getting the nice triangle clipping on the background image but isn’t visible under the menu i.e. the menu is no longer above the top-banner. Any ideas on how to go about this?

        1. Beaver Child Themes Admin

          ok cool. so it looks like there isnt a negative top margin on the top banner. so you could add that.

          in my test I did margin-top:-100px on the .fl-builder-content .top-banner

          let me know how that goes

  2. Hi
    thanks for this info, it has been a great help to me and I have just used it on a clients site. 🙂
    One question, I have a very fine white line just under the menu that I cant seem to get rid of…
    Do you have any idea why that might be?
    see http://www.dogservicesmallorca.com
    many thanks

    1. I have just updated this tutorial to remove this line. Add the below CSS 🙂

      header .fl-page-header-wrap { border-bottom: 0; }

      1. Hi again,
        I tried adding this css but perhaps I am missing something as it doesnt seem to have worked for me…
        sorry for the delay in replying, I have been away for work.
        I know have the following css in my child theme style.css

        /* Add your custom styles here… */

        /* Make the header transparent */
        body .fl-page-header-primary{
        z-index: 10;
        /* Remove the bottom border from the header
        // if you do not add this there will be a faint line under your header */
        header .fl-page-header-wrap {
        border-bottom: 0;

        @media screen and (min-width: 993px) {
        /* ROW STYLING */
        .top-banner .fl-row-content-wrap{
        margin-top: -215px;
        padding-top: 250px;
        padding-bottom: 80px;

  3. Richard De Angelis

    Hi Grant,

    This tutorial is great! I’ve been reading and enjoying your Master Beaver Builder in 30 days series.

    One issue I’ve got with this transparent header tutorial is how to achieve this with the Blog page if we are to set up the blog “The right way” ie via wp admin, not using the BB Blog posts module.

    I’m using the Beaver Builder Theme and Child Theme. So I’m hoping I can just create a custom template for the Blog page and post pages and add those to the Child Theme. Adding hardcoded versions of the transparent header we created in this tutorial to the page templates.

    Is there any way you could give some guidance/a tutorial on how to achieve this, perhaps as an addendum to this tutorial? ie How to replicate the divs for the transparent header and add the required CSS to the blog and single post templates.

    Many thanks


    1. Hi Richard 🙂

      So that tutorial shows you how to do it for pages as you have found. I will look at doing a tutorial on how to do it for the site wide like I have here currently on BeyondBeaver.com but this is using custom fields and editing a bit of PHP.

      It works great though!

      What you need to do is create custom fields for the background image and then write some PHP and insert it AFTER the header using the fl_after_header action hook. Then you use some CSS to move it up.

      Now that I think about it, you could actually follow the tutorial I wrote here for Single Posts https://beyondbeaver.com/customize-the-post-header-of-a-single-post-in-the-beaver-builder-theme/ but set the custom field to Posts AND Pages – that would work (you’ll see what I mean during the tutorial when you read it).

      Let me know how you go with that tutorial 🙂

      1. Richard De Angelis

        Hi Grant,

        I’ve followed that tutorial and managed to get it to work perfectly on single-posts. I needed to add negative margin-top to bb-top-post-header to position the image beneath the header and it works perfectly.

        However I haven’t been able to make this work on the blog posts page, archives, categories, author etc. Which causes inconsistencies and broken layouts on these pages.

        What steps do I need to make to apply this to those pages?

        Thanks again for these great tutorials. Really excellent content.


        1. Hi Richard,

          To have this work also on post categories where the image is different for each category youd need to use something like Advanced Custom Fields to add an image field to.

          Then you’d need to use PHP To get this image for the current post category and output it as the background in the same way you are doing for the single posts.

          So you’d do this in this order

          1) Use Advanced Custom Fields to add an image field to the post categories
          2) In the function you are using for the single posts you could do an elseif and check if it is a category. If it is, then get the image url of the field for that category and output it as the background.

          I don’t currently have a tutorial on this but could make a note of it for a later date.

          I hope that helps.

  4. Hi Grant. Thanks for the awesome write up. I have BB pro and for some reason my default header (for the BB child theme, which I have active) does not look like the one used in this article . Are you using a different theme or plugin that allows for greater customization of the header content? Or have you simply customized the header content using CSS? My default BB Child theme lacks the content “Logo, About, Menu, Gallery, etc.” Any tips using the BB Child theme to customize this portion of the header?


    1. Hi mate.

      No custom plugins used – just the normal Beaver Builder Child Theme. Go to your WordPress Dashboard by logging in, then Appearance > Customize > Header > Header Layout and see if you have fixed header in there.

  5. This has been a brilliant help! I am however stuck at one point, everything works well until I add a logo image. When I add a logo .png it sits half way between the top-banner row and the header so I am left with some padding at the top ?? is there a way to have the top-banner row sit under the logo the way it does with the text ??

    1. Yep! Just replace margin-top: -115px; on the top banner with a higher number like -150px or whatever works for your website 🙂 Tweak this value until the Top Banner reaches right to the top.

  6. I really needed this addition to my site, thank you for the simple process. I am having one issue though, when I scroll down and the Fixed Header pops up it is also transparent. i’d like to see it have a shaded background instead of fully transparent. I believe this is where the transparency of the Fixed Header is set. Thank you for any help.

    In the Header > Header Style, i have set the following.
    Background Color – Black
    Background Opacity – 50
    Background Gradient – Enabled

    1. Hi! Without knowing the URL it appears the CSS you’re adding to the page is targeting .fl-page-header{background:transparent;} BUT, in fact, you need to be targeting .fl-page-header-primary{background:transparent;} (i.e. you need the primary header only) – do that change and let me know how this goes 🙂

      1. Hi Grant, thank you for the reply but still no go. The site address is http://www.lmreptiles.com/home-2016/
        I can edit the color permanently by changing the background to background:rgba(0, 0, 0, 0.35); but I would really like to just have a separate color for the persistent header. The code I have in right now, copied from the site is this:
        /* Make the header transparent */
        body .fl-page-header-primary{
        background:rgba(0, 0, 0, 0.35);
        z-index: 10;

    1. Hi J!

      Parents First Aid Courses – the image scaling down is probably how you have your image set up (row background image set to COVER), but I scaled down the text on mobile which causes the image to not change too much between desktop and mobile.

      It’s a balance act. If you keep the proportions of this desktop the same between mobile and desktop the image will fill the same and thus appear not to crop too differently between the different devices.

      For example, 16:9 (widescreen) – if you try and maintain this between deskop and mobile then your row background image that is set to COVER will work more like you’re wanting.

      Let me know how you go!

  7. Hello Grant,

    First and foremost, thank you so much for the instruction on transparent header. I was able to deploy it fine and it looks great! However, I do have one question… Is it possible to apply either 1) different company logo for sticky header and pages other than static front and/or 2) change font color for menu while on sticky header and other pages? I would like to keep my header background white for sticky header but then my fonts are white as well so it becomes unlegible… I’m sorry if this is outside scope.

  8. Hi Grant,

    I’d like to do this on a genesis child theme – I’ve been removing the headers entirely of the theme and adding builder header as global on past sites.
    Presuming I’d need to modify the pages to just show header area in genesis as first step?
    Can you point me then to the parts of code I’d need to amend to make this work on genesis header – any links or suggestions welcome – I don’t expect you to do whole tutorial of course!
    I’m let’s say of medium skill with CSS and code – great at copying and pasting!!
    Thanks in advance

    1. Hi there!

      The tutorial above would but you’d just need to change the hooks to use a Genesis theme. I.e the genesis_after_header or another one similar to what you need.

      It sounds like you may have already been doing this though if you are removing the header (I assume you are doing this with remove_action(genesis_header) or something similar?).

  9. Hey man, thanks for the tutorial. This is just what I was looking for. I am unfortunately having problems with this. I followed the instructions however:

    a) In step, 3 where I go to add ‘top-banner’ to the CSS, I will navigate my way to the advanced settings for the row but there is no CSS section at the bottom.. only an HTML section.

    b) This is the following code that I am using in the Global settings > CSS section:

    /* Add your custom styles here… */

    /* Make the header transparent */
    body .fl-page-header-primary{
    z-index: 10;
    /* Remove the bottom border from the header
    // if you do not add this there will be a faint line under your header */
    header .fl-page-header-wrap {
    border-bottom: 0;

    @media screen and (min-width: 993px) {
    /* ROW STYLING */
    .top-banner .fl-row-content-wrap{
    margin-top: -215px;
    padding-top: 250px;
    padding-bottom: 80px;

    The content for the top section that the header will sit over is a video, not an image.. I wonder if that makes any diference.

    Really hope one of you guys can give me some insight about where I am making a mistake.

    Thanks for your time!


  10. I’m guessing since this article is from 2016 that maybe that’s why this CSS isn’t working for me? Like it’s literally doing nothing. I’m a bit baffled.

Leave a Comment

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

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top