facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

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

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

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.

transparent-header-parent-first-aid-courses

Here is another website where I have used the transparent header effect for the design.

trans-header-simplify-finance

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.

  • thumb-bewell

    BeWell

    $69.00
    Live PreviewAdd to basket

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.

edit-page-with-beaver-builder

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.

top-trans-header-complete

IMPORTANT NOTES

  • 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.

trans-header-css-class

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:

  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.

IMPORTANT NOTES

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.

trans-header-css-added

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.

trans-header-header-styling

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.

trans-header-show-fixed-menu-preview

When done, click the blue SAVE button in the Customizer.

I'm building a transparent header for my #BeaverBuilder website!Click To Tweet

How to use this through your whole site

Saved Rows! Introduced in Beaver Builder lately was the ability to created Saved Rows!

trans-header-saved-row

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.
    trans-header-cant-see-header
  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.

What you should do next

  1. If you found this useful you will definitely want to read How to use the hooks in the Beaver Builder Theme for WordPress
  2. If you found this technique hard to follow or just want to save time, our Child Themes are ready-to-go and a couple of them have this transparent header effect built it.

29 Comments

  1. Athlone on April 21, 2016 at 10:57 pm

    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?

    • Beaver Child Themes Admin on April 22, 2016 at 5:52 am

      Hi there,

      would you be able to share a link so I can take a closer look?

      • Athlone on April 25, 2016 at 9:46 pm

        Thank you for the reply.

        And certainly, here it’s uploading to a staging server: http://fruition.webx-staging.com/

        • Beaver Child Themes Admin on April 26, 2016 at 5:11 am

          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. Athlone on April 28, 2016 at 8:27 pm

    Super, that was it, I just did not see that! 🙂

    Thanks for taking the time to check it out.

  3. Athlone on April 29, 2016 at 12:54 am

    Do you have issues with mobile menus on your sites pushing the background down?

  4. scraggly on September 7, 2016 at 5:05 am

    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
    C

    • Grant Ambrose on September 7, 2016 at 8:50 am

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

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

      • scraggly on September 28, 2016 at 5:16 am

        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{
        background:transparent;
        position:relative;
        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;
        }

        /* FOR GREATER THAN THE MEDIUM DEVICE BREAKPOINT */
        @media screen and (min-width: 993px) {
        /* ROW STYLING */
        .top-banner .fl-row-content-wrap{
        margin-top: -215px;
        padding-top: 250px;
        padding-bottom: 80px;
        }
        }

        • Grant Ambrose on September 28, 2016 at 8:09 am

          ok if that doesn’t work then try this one instead 🙂

          body .fl-page-nav-right .fl-page-header-wrap{border:0;}

          • scraggly on October 14, 2016 at 9:36 am

            That’s got it!
            thanks so much 🙂



          • doublemint2x on January 10, 2017 at 8:15 pm

            had the same issue here as well. Thanks for this comment, took care of it!



  5. Richard De Angelis on September 10, 2016 at 9:16 pm

    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

    Richard

    • Grant Ambrose on September 14, 2016 at 3:17 pm

      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 🙂

      • Richard De Angelis on September 22, 2016 at 1:34 am

        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.

        Cheers
        R

        • Grant Ambrose on September 22, 2016 at 8:35 am

          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.
          Grant.

  6. as1430txstate on September 13, 2016 at 5:01 pm

    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?

    Thanks!

    • Grant Ambrose on September 14, 2016 at 3:18 pm

      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.

  7. davidroddie on September 20, 2016 at 11:44 pm

    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 ??

    • Grant Ambrose on September 21, 2016 at 10:36 am

      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.

  8. EndZz on December 9, 2016 at 9:26 am

    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

    • Grant Ambrose on December 9, 2016 at 8:19 pm

      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 🙂

      • EndZz on December 19, 2016 at 1:56 pm

        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);
        position:relative;
        z-index: 10;
        }

        • Grant Ambrose on December 20, 2016 at 11:07 am

          If you go back into Appearance > Customize and change the header from Shrink to Fade In, then it will work 🙂

          • EndZz on December 20, 2016 at 7:44 pm

            OMG, serioulsy!? I can’t believe that was it, thank you Grant! LMAO



  9. jchristenbury on December 12, 2016 at 12:30 pm

    This has worked like a champ! I am wondering how to set my header image and headline to act like the one on http://parentsfirstaidcourses.com.au/ to where the hero image stays the same proportion and simply scales down.

    • Grant Ambrose on December 12, 2016 at 3:12 pm

      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!

  10. joshbh on December 28, 2016 at 1:01 pm

    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.

Leave a Comment

You must be logged in to post a comment.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x