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).
Can You Still Have A Transparent Header In Divi Over The First Section? Yes!
The new Divi Theme Builder has brought a lot of change and adjustment to those choosing to active the Theme Builder for the header area of their sites. There are lots of new possibilities, but there are also some things that are not impossible now. We’ve been covering a lot of the new hidden featureshere on the blog and on our YouTube channel, so be sure to subscribe for all the goodies!
I know some of you were hoping to still be able to achieve the transparent header like we could do with the menu prior to Divi 4.0. It was quite easy – just set the header background slider to transparent, and walah! The content in the first section magically moved up behind it. But there’s no Customizer settings anymore once you have the Theme Builder enabled, so how can we do this?
Easy peasy! You can do this directly in the Divi Builder now since the Divi 4.2 version update, and we are proud to once again be the first to offer a solution to a common request in the Divi community.
Here’s an example of one I threw together:
#1. Set Up The Transparent Header
To achieve the transparent header menu, there are a few settings in to adjust in your header section and in the Divi Menu Module.
Make the section background transparent in Theme Builder layout.
First of all, make sure the main background section in your Divi Theme Builder is set to transparent. By default, it may look like it already set to nothing, but this step is crucial for it to work. Divi now has a transparent color in the color picker, so select that for the header section background.
Make the Menu Module background transparent in Theme Builder layout.
By default the new Divi menu module has a white background, so set that to to transparent as well. By default, this is set to a color, so the Menu Module also needs changed to transparent along with the background of the entire section.
But then this happens? Everything is white instead of transparent! 🙁
That’s okay, we just need to go to the next step which is going to be super easy!
#2. Move The Theme Builder Over Top Of the First Section
The Solution You’ve All Been Wanting
Now for the real deal! In Divi 4.2, there is a new option to set the Position of any module, row, or section. There are several new settings, which we could do previously with a simple line of CSS, but now we can set the position right here in the Divi Builder.
Go to the header section settings to the Advanced tab and look for the Positiontoggle. Inside, change the Position to Absolute.
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.
#3. Assign The Transparent Divi Header In The Theme Builder
Sitewide Transparent Divi Header
The first solution will make your Divi Theme Builder header transparent across your entire website. It will move the first section of the page up behind the header. When using this method, make sure you have adequate padding in the first section of your pages to make room for the menu on top of it.
Homepage Transparent Divi Header
This second solution will only affect the home page (the one you have set as homepage in WordPress settings).
Specific Page Transparent Divi Header
The last option here is if you want a specific page on your website to have a transparent header. Choose the
#4. Improve Readability
Set text to a light color in the Theme Builder layout.
This goes without saying, but it can be a little confusing to do because the background will be white (even though it is set to transparent)
Add A Color Overlay To The Hero Section
Now, to make the white text stand out, let’s add a color overlay to the background image in the first section of the page.
Here’s another look at the final result of our transparent Divi header built in Divi 4.2 and upward.
Make Fixed and Change The Color When Scrolling
You may want to take this a step farther and make the header stay fixed, and then also change the color of the fixed header when scrolling. To do that, check out our related tutorials on those topics.
I hope you have enjoyed learning How To Make A Transparent Header In The Divi Theme Builder (Like The Old Header). Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂
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.
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.
Had the same issue. It kept disappearing, but dragged z-index to 500 and it stuck.
Theresa
on January 30, 2020 at 12:57 am
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?
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
on May 26, 2021 at 8:31 pm
Could you please share the URL of the website for us to investigate further?
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)
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.
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?
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…
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?
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
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.
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?
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 😉
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
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.
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?
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?
Hi Ryan,
Are you referring to the mobile menu? I checked and the background is black.
Jeni
on October 19, 2020 at 12:28 pm
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?
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.
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
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
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;
}
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?
We are glad that the issue is resolved now. Please let us know if you need any other help.
Trisha
on January 28, 2022 at 11:04 am
I think divi may have changed something. Works great on desktop. on mobile, everything stacks on top of eachother. (the first section doesn’t move down past the header.)
Ive used this fix for the time being. its not great. I bet you have a better solution 😀
/* clear transparent menu in mobile */
@media only screen and (max-width: 981px) {
.et_pb_section_0 {padding-top:50% !Important;}
}
Thank you for this tutorial but I doesn’t work well for me. I’ve got only bg color, not picture in the first section. If I set position of this section to absolute, it’s still under the header so I have to set negative margin to it to make this section reach the top of the page. And whole section has so small height when I set it to absolute that content of this section is not shown (it’s hidden somwhere “behind” the second section) and no size or margin/padding settings don’t change it. I can’t share link since this website is not public yet but I tried everything and don’t know how to solve this. Do you have any advice?
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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.
I actually did it with z-index.
Had the same issue. It kept disappearing, but dragged z-index to 500 and it stuck.
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?
Hi Theresa,
It is possible, but only with my tutorial here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-change-the-color-of-a-fixed-divi-header-menu-when-scrolling/
That should do it for you! 🙂
Thank you so much! I just spent the last hour trying to figure out why my background was white!
Hey Tim, yes that is confusing! Glad I could help!
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?
Could you please share the URL of the website for us to investigate further?
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)
Hi Keith, you should be able to have the thin bar be a separate row, so have two rows within the section. Would that work?
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.
Hi Jorge,
Yes, you can learn how to do that in this tutorial: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-change-the-color-of-a-fixed-divi-header-menu-when-scrolling/
I’ve updated the post with this link as well! 🙂
Awesome! Thank you for the quick follow up. That worked perfectly.
Nice, glad to help!
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?
Hi Morris,
Nothing in the tutorial would have caused that. If you can share the link we can take a look.
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…
Hi David,
I’m so glad I could help you solve this! 🙂
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?
My other post will help with that. https://wordpress-292293-1617718.cloudwaysapps.com/how-to-fix-the-hidden-divi-menu/
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.
Sounds good, Jorge!
Doesn’t work for me 🙁
1 Transparent backgrund in Section and menu item
2 Adjuste position to top absolute
Hi Santiago, what’s not working exactly? Have a link I can see?
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
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.
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
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.
Nelson: Thanks for the quick response. I still need a bit of help if possible.
I use the code from https://wordpress-292293-1617718.cloudwaysapps.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
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 😉
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
Hi Tim,
We have several tutorials for fixed headers. Here’s one to get you started: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-make-a-fixed-divi-header-menu-on-desktop-or-mobile/
thank you
Thank you! You saved me a TON of time.
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
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?
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
Hi Ryan,
Are you referring to the mobile menu? I checked and the background is black.
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?
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.
Didn’t work for me
What didn’t work? Do you want help? Let me know exactly what you tried.
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
Hi Henry,
I’m not sure what you mean, the header I see is not even fixed, and not white. You can elaborate if you still need help.
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;
}
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. 🙂
Thanks, Nelson. Something that finally works.
I’m happy to hear that, enjoy!
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
Hi Mark,
We usually have different tutorials for specific things like that: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-replace-the-divi-theme-builder-logo-when-scrolling/
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?
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.
Hi Meghan,
We are glad that the issue is resolved now. Please let us know if you need any other help.
I think divi may have changed something. Works great on desktop. on mobile, everything stacks on top of eachother. (the first section doesn’t move down past the header.)
Ive used this fix for the time being. its not great. I bet you have a better solution 😀
/* clear transparent menu in mobile */
@media only screen and (max-width: 981px) {
.et_pb_section_0 {padding-top:50% !Important;}
}
Hey Trisha,
It would be great if you share the URL for me to investigate further on this issue.
Hello,
Thank you for this tutorial but I doesn’t work well for me. I’ve got only bg color, not picture in the first section. If I set position of this section to absolute, it’s still under the header so I have to set negative margin to it to make this section reach the top of the page. And whole section has so small height when I set it to absolute that content of this section is not shown (it’s hidden somwhere “behind” the second section) and no size or margin/padding settings don’t change it. I can’t share link since this website is not public yet but I tried everything and don’t know how to solve this. Do you have any advice?
Hey Adela,
Could you please share the URL of the website for me to investigate it further?