How To Create a Transparent Header Menu in the Divi Theme Builder Tutorial by Pee-Aye Creative.png

How To Make A Transparent Header In The Divi Theme Builder (Like The Old Header)

This quick tip will show you how to create a transparent background with the Divi Theme Builder so it shows over top the page content (like the old header).
example of a transparent background color in the Divi Theme Builder
Transparent Header in the Divi Theme Builder
How To Create a Transparent Header in the Divi Theme Builder
example of transparent background color in the Divi Theme Builder
make transparent Divi header fixed absolute over top of section

Now your header section will be over top of the first section on your page! Save the Theme Builder layout and go take a look at the page where this layout is assigned. For more on that, go to step #3 below.

Assign the transparent header menu template across entire website the Divi Theme Builder
Assign the transparent header menu template to all pages in the Divi Theme Builder
Assign the transparent header menu template to homepage in the Divi Theme Builder
Assign the transparent header menu template to all pages in the Divi Theme Builder
Assign the transparent header menu template to a specifici page in the Divi Theme Builder
Choose which header you want to be transparent from the Divi Theme Builder
Set Divi section background color overlay for transparent header
set background image blend to overlay for Divi transparent header section

Here’s another look at the final result of our transparent Divi header built in Divi 4.2 and upward.

example of a transparent background color in the Divi Theme Builder
How To Create A Fixed Divi Header Menu On Desktop or Mobile Tutorial by Pee-Aye Creative
How To Change The Color Of A Fixed Divi Header Menu On Scroll Tutorial by Pee-Aye Creative
51

Last updated Jan 3, 2021 @ 1:34 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

53 Comments

  1. Daniele Brunengo

    Hello, great help! This works, but I can’t seem to get the header to have a transparent gradient background.
    If I assign a gradient to the .home .et_pb_section_0_tb_header.et_pb_section div, it just doesn’t show.

    Reply
    • Daniele Brunengo

      I actually did it with z-index.

      Reply
  2. Theresa

    Hi I was trying to do this but at the moment I have on scroll a background header, different colour text and different logo. Is this possible with the new theme builder?

    Reply
  3. Tim Fleming

    Thank you so much! I just spent the last hour trying to figure out why my background was white!

    Reply
      • Jaydeep

        I am facing same issue, can you please advise me why my header looks white background instead of transparent as per tutorial? Can you please attach json file for header here?

      • Hemant Gaba

        Could you please share the URL of the website for us to investigate further?

  4. Keith Agnew

    Great article – but my header has two sections – I’m trying to make this work with a main menu section (transparent) and a top-bar (with background) – very much like the traditional Divi menu where we have a thin row above the main menu section. If I add absolute positions to these I lose my top-bar section. (thanks)

    Reply
  5. Jorge Carbwood

    I made the header static and transparent, following this great tutorial. Now can I add some color once the page starts scrolling? If not, then the text and the menu are not readable. Any tips will be highly appreciated.

    Reply
  6. Morris Jamlang

    So I was able to replicate what you have over here and it’s awesome. Exactly what I wanted! Kudos. But when I am trying to use the top menu or anything on the header, nothing is clickable. I checked on the inspector but nothing conclusive from what I see. I am still working on the site but I was wondering if it is something like a z-index issue or something overlayed on top of the menu?

    Reply
  7. David Cuff

    Thank you very much for this very helpful post. I have not done this since prior to the Divi Theme Builder and found myself totally stuck again… Until reading your easy to follow article…

    Reply
  8. Jorge Ad

    I make the menu transparent, but the problem is that the menu is behind the background full-width image I have in the page (hero section). How could I solve it?

    Reply
  9. Jorge Ad

    Thank you! It works perfectly.
     
    I was using divi with another theme and the menu was placed behind the content, but I solved changing to divi theme.

    Reply
  10. Santiago

    Doesn’t work for me πŸ™
    1 Transparent backgrund in Section and menu item
    2 Adjuste position to top absolute

    Reply
  11. Ben Wilson

    Nelson:

    I love your site and all of the tips, Keep them coming!!!

    http://wellvationdesign.flywheelsites.com/

    I have a minor issue. I had the transparent header (using Theme builder) working fine, I set off to work on the slider and somewhere along the line, the header is now white. I retraced my steps, but still can’t seem to fix it. Anyway you could take a look and give me some suggestions?
    Thanks and stay safe,
    Ben

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Ben, I’m so glad you like my site and the tips! I’ll be sure to keep them coming as much as possible! πŸ™‚
      So I took a look at your site, and it was like I suspected. The header is white (rather than the expected transparent) because the header is not positioned properly. I’ve said it before, and it’s kind of a joke, but you can’t have it transparent or we could see into your computer monitor. πŸ™‚ It can only be transparent if it is over top of other content, but I can see the slider below is not being cut off by the header, which tells me the position is not set or not working on the header.

      Reply
      • Ben WIlson

        Got it. I have 2 different custom headers. Home page uses your transparency trick, but on the inside pages, I tried using the script to prevent Fixed Divi Header From Overlapping The Page. Looks like I caused the conflict.

        Can I use script on all, but home page? or do I manually fix it each page?

        Thanks for your patience.
        Ben

      • Nelson Lee Miller (aka The Divi Teacher)

        You can certainly have a different Theme Builder header for any page. I believe that may be what you are looking for but if not let me know.

      • Ben Wilson

        Nelson: Thanks for the quick response. I still need a bit of help if possible.
        I use the code from https://www.peeayecreative.com/how-to-automatically-stop-your-fixed-divi-header-from-overlapping-the-page-and-push-it-down-instead/ on all pages except the home page )and one other). Is there a way to have a single page ignore this code?

        I am able to EITHER have a transparent header OR fix the overlapping issue. I’d love to be able to do both.

        Stay safe,
        Ben

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Ben,
        You can’t physically have both. You kind of have to to stop and think about it…you can’t have a transparent header above the content or we would see into your monitor πŸ˜‰

  12. tim

    This was a great article. I’m wondering how you can do at fixed global header and make your logo and menu stay in place. Her is a example
    https://www.premierpressureclean.com/

    I can get the quote and phone number to work in a global header but when I add the menu and logo it doesn’t work.
    Is my approach correct

    Thank you

    Reply
  13. Ryan

    Thank you! You saved me a TON of time.

    Reply
  14. Shane

    Nelson, thanks for all of your tutorials and tips. Seriously, since coming across Pee-Aye, you have saved me so much time and so many headaches. Cannot thank you enough.

    This is a great tutorial as well, and it’s worked really well. Only one hang-up that I keep running into. With the dropdown menus on mobile and tablet, the dropdown menu items themselves also have a transparent background. When I go to change that in the module settings (I want a white dropdown background), it doesn’t change the transparent background. So then my dropdown menu items blend in with the header.

    Here’s a link to my staging homepage: http://rediscoveredself.com/2-0-home

    Any ideas on how to get a white dropdown menu when the changes I make in the module don’t seem to do the trick?

    Thanks,
    Shane

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Shane,
      Our tutorial does not affect the mobile menu, and from looking at the code it doesn’t look like the background color has been set in the dropdown menu background. Can you double check that?

      Reply
      • Dan

        Hi Nelson,
        I have the same issue as Shane. No matter what I do, the mobile hamburger dropdown menu background is transparent.
        This seems like it may not be connected to this post, but I’m hoping you can help anyway!
        I can change the dropdown background menu in Divi to white, which works while in the builder, but as soon as I exit the Visual Builder and test out the live site, it’s back to transparent. For some reason, the changes don’t seem to be taking effect. I have tried clearing my cache numerous times and testing out different browsers as well.
        Any options for me?

        Link: http://www.dandoerksen.me/workwithme

  15. Jeni

    Love this! It was exactly what I was looking for with the exception of spacing. Can you add distance between the logo and text so it appears more like the traditional nav bar?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jeni, so if I understand correctly your question is not related to this post. I’m sure you could do that, you could either add a separate image module for the logo or come up with some CSS to add some margin right to the image or margin left to the first nav item.

      Reply
  16. Ryan

    Didn’t work for me

    Reply
  17. Henry Antony

    Hi
    Great support…
    I tried your guidance, but a white background is coming in top header, while scrolling down its shows transparent. but in header its white.
    Pls help to remove the white bg, tried some methods using Apperance>customize…
    this is my site link “https://navlensstudio.com/”
    thank you

    Reply
  18. Ernst

    Hi, this works like a charm.
    Only problem is; I’m using this code for creating a full screen mobile menu. And by using an absolute position, it doesn’t work anymore on that page (I only need a transparent menu on the homepage) do you have a solution how I can still use both? Or maybe a better solution for full screen mobile menu? See: https://opuscbd.nl/home

     #mobile_menu, .opened #mobile_menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    max-height: 100%;
    z-index: 10;
    top: 0;
    border: none;
    overflow-y: auto;
    max-width: 100%;
    float: left;
    transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url( insert your image URL here );
    background-size: cover;
    background-repeat: no-repeat;
    }

    .opened #mobile_menu {
    transform: none;
    }
    .opened #mobile_menu a {
    transform: none;
    opacity: 1;
    }
    .opened #mobile_menu .menu-item:nth-child(1) a, .closed #mobile_menu .menu-item:nth-last-child(1) a {
    transition-delay: 100ms;
    }

    .opened #mobile_menu .menu-item:nth-child(2) a, .closed #mobile_menu .menu-item:nth-last-child(2) a {
    transition-delay: 200ms;
    }

    .opened #mobile_menu .menu-item:nth-child(3) a, .closed #mobile_menu .menu-item:nth-last-child(3) a {
    transition-delay: 300ms;
    }

    .opened #mobile_menu .menu-item:nth-child(4) a, .closed #mobile_menu .menu-item:nth-last-child(4) a {
    transition-delay: 400ms;
    }

    .opened #mobile_menu .menu-item:nth-child(5) a, .closed #mobile_menu .menu-item:nth-last-child(5) a {
    transition-delay: 500ms;
    }

    .opened #mobile_menu .menu-item:nth-child(6) a, .closed #mobile_menu .menu-item:nth-last-child(6) a {
    transition-delay: 600ms;
    }
    .mobile_nav.opened .mobile_menu_bar:before {
     content: ‘\4d’;
    color: #fff;
    transition: all ease-in-out 300ms;
        z-index: 100;
    }
    .mobile_nav.closed .mobile_menu_bar:before {
    transition: all ease-in-out 300ms;
    }

    Reply
    • Hemant Gaba

      If you want to use the CSS Styling only for the homepage then you can add the class home in the start of the selector and it will work on the home page only.
      For example if you want to use this code:

      .opened #mobile_menu {
      transform: none;
      }

      for the home page only then add the home class like this:

      .home .opened #mobile_menu {
      transform: none;
      }

      and this code will work for the homepage only.

      Please let us know if this helps. πŸ™‚

      Reply
  19. Miro

    Thanks, Nelson. Something that finally works.

    Reply
  20. Mark Mapstone

    Hi. I’m going from a transparent header with a white logo, to a white header with a black logo. How would I swap out the logos using your code?

    thanks

    Reply
  21. Meghan

    Hello – Thanks for this tutorial? I am getting a white strip along the top of the pages even though the menu is transparent. Any idea what could be causing this?

    Reply
    • Meghan

      Problem solved! I made sure the Absolute setting was on both the section and row sections as well and it fixed the issue! Thanks again.

      Reply
      • Hemant Gaba

        Hi Meghan,

        We are glad that the issue is resolved now. Please let us know if you need any other help.

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins β€’ Courses β€’ Templates

Visit The Shop

ξ‚£

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart