Another Header Tutorial To Compliment Previous ones
At this point in our Divi header series we have covered quite a lot! We have so many tutorials and videos on this that I keep thinking there can’t be any more to make, but here are! This one will show you how to change/swap/replace the logo in a fixed Divi Theme Builder header.
One of the requested tutorials which will go along with some of our previous ones is to change the logo image in the Divi Theme Builder header menu you scroll. This would be for fixed headers.
This one is going to go along perfectly with some of our previous tutorials:
#1. Create Your Fixed Divi Theme Builder Header Menu
From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”
In the Divi Theme Builder template, create a section and add a row with any layout you want. In our example, we used a logo, menu, and button.
The most important part here is adding the CSS class to the section. Go to the section settings to the Advanced tab and add the class “pa-header” as shown in the image below.
Be sure to set the header section position!
Go to the section settings to the Advanced tab and go down to the Position toggle. Set the position to Fixed.
#2. Add Some Custom jQuery Code
This Code Will Add A New CSS Class On Scroll
Now for the fun part! You don’t have to worry about adding code because I’ll show you exactly where to add this and you will do just fine copying it to your website!
From your WordPress dashboard, go to Divi>Theme Options. Then look for the Integrations tab at the top. Once you are there, you will see a code input area that says “Add code to the < head > of your blog.” That’s the input areas where you need to paste the code snippet below.
This Code Will Shrink the Divi Menu Items When Scrolling
In step #2, we added some jQuery code that activates a new CSS class in the header section when the page scrolls. Now, we need to tell that class what to do. In our other tutorials, we were changing the background color and making it shrink, but in this one, we are going to replace the logo image.
Replace The Logo Image
As the user scrolls, the header stays fixed. But since the background color may be changing, or perhaps you are shrinking your header (from our other tutorials), you may also want to replace the image.
One good reason to do this is if you change the color of the background when scrolling, your logo might not look good with the new color.
To do this, we need to add the following code snippet to our previous one.
/*replace the logo when scrolling*/
.pa-fixed-header .et_pb_menu__logo img {
content: url(INSERT NEW LOGO IMAGE URL);
}
I hope you have enjoyed learning How To Replace The Divi Theme Builder Logo When Scrolling. 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 for more stuff like this.
We release a full tutorial every Tuesday! We also release other helpful tips, freebies, and resources throughout the week. This email list will send you an email when we post a new blog post.
Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Hi Peter!!
Fantastic tutorial! I changed the logo and the color when scrolling, but there is a gap between the new scrolled section and the top of the page. I adjusted the html to 0px, but the gap reappears when I scroll. Any suggestions? Here’s the site. http://ifh.wpengine.com/ I apologize for the http, but this is the staging site, and I don’t have any control over installing a certificate.
Michelle
/*set the defautl background color of the header section*/
.pa-header {
background: transparent;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
padding: 0px 0;
background-color: #fff;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
/*set the font color*/
.pa-header .et_pb_menu__menu>nav>ul>li>a {
color: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the menu font color*/
.pa-fixed-header .et_pb_menu__menu>nav>ul>li>a {
color: #000!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Logo change is working in Google Chrome, Edge Developer & Brave browser but not in Firefox Developer Edition. On inspect, found that the CSS doesn’t have any effect in Firefox.
Nelson, your tutorials are super-useful and easy to understand, many thanks.
I’ve used the code for replacing the logo on scroll. But then the new logo does NOT link back to the h’page, like the original logo did.
I got round that by hyperlinking the column the image sits in, and on desktop works fine. But not on tablet/phone view. Any ideas?
Regards, Robin.
I’ve successfully used your tutorials to create a global header with the Divi theme that swaps colors, logos and shrinks upon scroll.
I’m having trouble changing the menu (upon scroll) from centered (with logo on top) to left-aligned (with logo to the left). In the theme customizer this setting would be under menu > design > layout > style (left-aligned, centered, inline centered logo).
Is this something that can be changed, like your other tutorials, in the Theme Options > Custom CSS, with a line like .pa-fixed-header .et_pb_menu { code} or is this another beast entirely? I want the fixed header to have the menu style change from center to left-aligned.
Hi Andrew,
Unfortunately that would not work, that would require changing the actual struction of the module, which may be possible by hacking it with jquery, but that is something you would need to hire someone to do.
Yeah, that makes sense after using the inspect tool to check out the code structure… it appeared that attribute of the module was deeper in the theme css. I eventually gave up on it to get the website going and just went a different route entirely and it’s all good. Work with what I got, ya know.
But thanks in general… these tutorials are very helpful for those of us that aren’t adept at code. I barely understand it and was able to accomplish most of what I was going for with your instructions. Some day, I might take a stab at learning from the beginning if the work warrants. I prefer to work on aesthetic, but ultimately knowing the code would allow me to execute the vision better.
I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.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}
thank Nelson
great tutorial as usual
Thanks Zamir, glad you like them!
Hi, very helpful tutorials.
In Firefox the Logo Change doesn’t work?
Should be fine in Firefox. Have you tested that?
I can confirm, Logo change does not work in Firefox (78.0.2 (64-bit) at least not on Mac
That would be strange for universal code not to work.
Yeah, confirming as well :/ Strange
Hi Peter!!
Fantastic tutorial! I changed the logo and the color when scrolling, but there is a gap between the new scrolled section and the top of the page. I adjusted the html to 0px, but the gap reappears when I scroll. Any suggestions? Here’s the site. http://ifh.wpengine.com/ I apologize for the http, but this is the staging site, and I don’t have any control over installing a certificate.
Michelle
/*set the defautl background color of the header section*/
.pa-header {
background: transparent;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
padding: 0px 0;
background-color: #fff;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
/*set the font color*/
.pa-header .et_pb_menu__menu>nav>ul>li>a {
color: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the menu font color*/
.pa-fixed-header .et_pb_menu__menu>nav>ul>li>a {
color: #000!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*replace the logo when scrolling*/
.pa-fixed-header .et_pb_image img {
content: url(http://ifh.wpengine.com/wp-content/uploads/2020/08/IFH-Logo-Black-Small.png);
}
html {
margin-top: 0px!important
}
Logo change is working in Google Chrome, Edge Developer & Brave browser but not in Firefox Developer Edition. On inspect, found that the CSS doesn’t have any effect in Firefox.
That’s weird! No idea why.
I have the same problem… in all the browsers works fine but in firefox wont change… any idea or solution?
Nelson, your tutorials are super-useful and easy to understand, many thanks.
I’ve used the code for replacing the logo on scroll. But then the new logo does NOT link back to the h’page, like the original logo did.
I got round that by hyperlinking the column the image sits in, and on desktop works fine. But not on tablet/phone view. Any ideas?
Regards, Robin.
Hi Robin,
That’s interesting, the link in the module should work either way. Otherwise there would not be any way to do it that I know of.
Hello Nelson,
I’ve successfully used your tutorials to create a global header with the Divi theme that swaps colors, logos and shrinks upon scroll.
I’m having trouble changing the menu (upon scroll) from centered (with logo on top) to left-aligned (with logo to the left). In the theme customizer this setting would be under menu > design > layout > style (left-aligned, centered, inline centered logo).
Is this something that can be changed, like your other tutorials, in the Theme Options > Custom CSS, with a line like .pa-fixed-header .et_pb_menu { code} or is this another beast entirely? I want the fixed header to have the menu style change from center to left-aligned.
Many thanks, you are awesome!
Andrew
Hi Andrew,
Unfortunately that would not work, that would require changing the actual struction of the module, which may be possible by hacking it with jquery, but that is something you would need to hire someone to do.
Yeah, that makes sense after using the inspect tool to check out the code structure… it appeared that attribute of the module was deeper in the theme css. I eventually gave up on it to get the website going and just went a different route entirely and it’s all good. Work with what I got, ya know.
But thanks in general… these tutorials are very helpful for those of us that aren’t adept at code. I barely understand it and was able to accomplish most of what I was going for with your instructions. Some day, I might take a stab at learning from the beginning if the work warrants. I prefer to work on aesthetic, but ultimately knowing the code would allow me to execute the vision better.
Cheers mate, thanks for responding.