This tutorial works for any section, row, or module, but I want to focus on the header and especially the Theme Builder header. We’ll include this is on our huge collection of Divi header tutorials. This is a great feature that allows you to have multiple sections in a header, but make the section with the main menu stick to the top when scrolling!
How To Make Any Divi Section, Row, Or Module Sticky
The first method here will work for any section, row, or module on the page. All you have to do is copy the code below and put in the elment you want to make sticky. Just go to the settings of the section, row, or module to the Advanced tab, then open the Custom CSS toggle, and paste it in the Main Element.
position: sticky;
top: 0px;
z-index: 9999;
Now when you scroll and that element reaches the top, it will stick there. When you scroll back down it will return to it’s oringal placement.
Once again, this is perfect for a header menu. You might want to have a hero section with a big image, then when you scroll the menu scrolls up and becomes sticky. This method is very simple, and should work well in a lot of cases.
How To Make A Divi Theme Builder Header Menu Sticky
This Is Intended for Headers with Multiple Sections
The idea here is to have more than one section in the Divi Theme Builder header. If you want, you can check out our previous tutorial on how to make the entire Divi Theme Builder header fixed, but in this case we only want to make one of the sections fixed to the top when scrolling. In other words, we want to make the menu sticky but the rest of it behave like normal.
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, but you may want this as your Global Header instead.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”
Builder The Header
At this point you can buid your header template however you want. The key here is to have more than one section. If you have two sections, the lower one will stay fixed when scrolling.
Add A CSS Class
Choose the section you want to stay fixed when scolling, and go into the settings to the Advanced tab and open the Custom CSS ID & Classes toggle. Paste the CSS class “pa-header” in the CSS Class input.
Add Some JQuery Code
Next, we need to add some code to make this work. Copy the snippet below and paste it in the Divi>Theme Options>Integration tab to the < head > of the blog section. For more information you can check out our full guide on where to add code in Divi.
<script>
jQuery(function ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(window).bind('scroll', function () {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$('pa-header').removeClass('pa-sticky-header');
}
else {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</script>
Add Some CSS Code
The last step is to add a small snippet of CSS to your website. You can copy and paste this snippet into your Divi>Theme Options>Custom CSS box.
/*set a specific element as fixed when scrolling*/
.pa-sticky-header {
position: fixed!important;
top: 0;
width: 100%;
}
I hope you have enjoyed learning How To Make Any Divi Section Stick To The Top 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.
Good snippet and well explained! But let me suggest this good observation from @Pierre Sudarovich 1 year ago in case you want to complete your post, since your snippet will not work if the Section contains any element with Animation:
“Divi add a inline style “overflow-y: hidden;” to the ID “page-container” as soon as there’s some animated elements on your page. And the CSS attribute “sticky” doesn’t like at all. So you’ll have to add this rule to your CSS stylesheet to avoid the problem:
I followed your before tutorial to make a fixed header with two sections and it worked perfectly.
Now I just read this new tutorial and would like to apply it to my header.
However I have followed all the steps and my whole header is still fixed. What am I doing wrong?
I would appreciate your help.
Nelson Lee Miller (aka The Divi Teacher)
on May 26, 2020 at 9:48 pm
Hi there, you mentioned that your whole header is still fixed. Can you explain what you mean? This tutorial is not about making the whole header fixed.
Hi Nelson.
Sorry for my English. it’s not very good.
I mean first I put me header with 2 sections fix and now I want to make sticky one of them.
But i followed the steps of this tutorial and it doesn’t work im my website.
Something I’m doing wrong
Could you help me ?
Many thanks
My page is https://www.fqeuskadi.org/
I have gone through the steps several times.
The only difference from Nelson’s example is that I am doing it on at Global Header instead of a Custom Header… but that shouldn’t be a problem 🤔
Any suggestions?
Hi Jacob,
Not sure! Usually when we do everything right, it is some simple thing. I’d be happy to take a look! Send me an email and maybe I can get access to the site and take a look!
Ive been looking for this solution for a few hours and thought i had found the solution when i watched your Youtube video but i just cant see why its not working for me, any ideas?
Appreciate your tutorials, they were nice and short and well explained, just a shame this one didnt work for me.
Hi Ben,
I don’t know what you mean by “second option.” The tutorial is referring to multiple sections, not rows, and I only see one section on your site. So try that! 🙂
Sorry, my fault for not explaining myself better. I was referring to your tut, the second part about “How To Make A Divi Theme Builder Header Menu Sticky This Is Intended For Headers With Multiple Sections”
I also should have mentioned that my header was made up of two sections previously but one was being used for mobile and tablet so didnt think to mention it.
I have re-read the tut, along with your suggestion in your comments reply and have added “pa-header” to a section not a row, my bad for not reading properly.
It doesnt seem to matter where i add “pa-header”, i still dont have this working.
I have tried adding to the section that originally housed three rows which i mentioned earlier. That didnt work.
I then added an additional section to house the main menu row i want made sticky, this didnt work either.
No worries, i will move on and continue building the site for now and return to this closer to when im ready to go live and see if any updates have been made.
Hi there, Thanks so much for the great video, should work great. I tried all the solutions multiple time but still can’t see what is wrong. Not working in a simple custom header with 2 sections.
Hello, thanks that does get me closer. I implemented every solution and went through all the settings and still not working. Thanks so much for your help Nelson!!!
Daniel
on July 10, 2020 at 12:33 pm
I simply need the menu area to be sticky on scroll.
Daniel
on July 10, 2020 at 12:59 pm
I downloaded the Sticky menu plugin and it now works. Thanks!
Hi, great post. I was just wondering if this will work for any theme other than divi theme. I currently have the divi builder plugin on the 2017 theme. Will this work? Thanks
Hi Hal,
I’m not sure, you maybe be able to apply the same concept but all of this was done in Divi so I don’t know how the header works with adding classes and such.
Bonjour et merci pour vos tutoriels 🙂
Malheureusement celui-ci ne fonctionne pas sur mon site et je n’arrive pas à comprendre pourquoi. J’ai pourtant suivi à la lettre vos recommandations.
Sur https://newsite.robedecoeur.fr/ le menu Hamburger (merci pour ça) refuse de s’arrêter en haut !
Auriez-vous une idée d’ou cela peut venir ? et pouvez-vous m’aider ?
Désolé pour la Google traduction.
———————-
Hello and thank you for your tutorials 🙂
Unfortunately this one doesn’t work on my site and I can’t understand why. I followed your recommendations to the letter.
On https://newsite.robedecoeur.fr/ the Hamburger menu (thanks for that) refuses to stop at the top!
Do you have any idea where this might come from? and can you help me?
Sorry for the Google translation.
I pasted the first code in the right row of my blog page layout (made a layout using Divi theme builder), but Divi doesn’t recognize the ‘sticky’ value and the code doesn’t work.
Using dev tools, the code is accepted but the right row is still not sticky when I scroll down the page.
I added it to: .et_pb_gutters3 .et_pb_column_1_4, .et_pb_gutters3.et_pb_row .et_pb_column_1_4{
width: 20.875%;
position: sticky!important;
top: 0px;
z-index: 9999;
}
I also added the #page-container.et-animated-content { overflow-y:initial !important; } rule to my child theme..
Hi Layla,
First of all, Divi pretends to not recognize it, but it still works. I believe I state that and show that in the video. I would use a custom class rather than that the long code you used, too many things that could be wrong in that.
Well, I did paste your code – the exact same – in the second green column that I use to build my blog page layout. But it doesn’t work on the live blog posts. It’s a post layout made with the theme builder (WP Dashboard > Divi > Theme Builder), could that maybe be the problem? (I don’t see why).
The longer code, is how I pasted the code in one of the blog posts (which the Theme Builder layout applies to) using dev tools. It’s the exact same code, applied to the column on a specific blog post. It doesn’t work in there either. So, for me, the code somehow doesn’t work and I have no idea why.
Kam
on August 18, 2020 at 3:24 pm
Hi Nelson.
Many thanks for your tutorials.
I followed your tutorial, but it doesn’t work on my site, Do you mind help me take a look. What’s the issue
Hi Nelson. Super useful tutorial and both methods work great. I would like to report though that animations within the row does break the effect. I’d also like to request some assistance in turning off the effect just for tablet/mobile. Is that something that’s possible? Many thanks and best regards.
Hi Raees,
Glad you like our tutorials! Interesting, I never use animations so I can’t confirm or deny, but I do know that they do not have the responsive settings so unfortunately I don’t know.
Hi! I love your tuts. Do you know if there’s a good way to use Divi’s new Scroll Effects settings to achieve a stick to top on scroll at x position from top?
I am having trouble with this on my website although the tutorial is succinct and so well done!
I am trying to make the section containing the menu in my custom header stick to the top when scrolling while the full screen image above scrolls away and then have the menu stay at the top as I continue to scroll down.
I technically would need to do this with 2 sections as the button section next to the menu also needs to stick, but I cannot even get the menu to stick, so have not tried the 2nd section.
I believe I have followed the instructions exactly, but it has no effect at all. (checked on different devices and browsers too)
Please help 🙂
I am new to Divi, so hoping that there is simple explanation that I an not familiar with yet.
Hi Jenni,
I’m not quite sure what the problem is. I wonder if you could just try the built-in Divi options for this? This tutorial was made before that feature was released, so I would try that first. I see you have the class pa-header added to http://testsite.tnzwebsolutions.nz/ I assume you have added the jQuery and CSS, correct?
Agreed with others, your post is really nice – flow and explanations, concise and educational. Alas, this would have been just what I needed, but like some of the other replies below, the 2nd option (stick a section of your header), didn’t work. I also followed to the tee, and even tried it 3 times to make sure no typos.
I have Divi pages with Animation – saw the other respondee’s note about Sticky doesn’t like animation – but I wasn’t sure where to put it. maybe you can advise me how to do.
I am not able to replicate the issue on my end as your section is sticking perfectly fine to the top. This might be a caching issue on your end. Could you please check the URL in the incognito mode and see if that helps?
Let us know how it goes. 🙂
Hi Nelson,
Your tutorials have helped me so much in the past – thanks for that! This one here is the first I can’t get to work – I must be missing out on something. Maybe you can have a look and help? The website is still in progress so please excuse the odd look. Thanks in advance.
Just to let you know that I worked it out by using the stick to top option of the scroll effects. Sometimes it’s really easy. Thanks again for all your great tutorials!
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}
the second option doesn’t work, the sticky menu heading
Hi Leandro,
It does work, so in order to understand why yours is not you will have to give me all the exact steps you have taken and the link.
Yeh mine didn’t work either 🙂 I followed the steps and just double checked them.
Sarah,
The solutions work, so maybe if you provide more details we can get this solved together. Which method are you trying? What is the link?
All good, I figured it out 🙂 thanks for your solutions, appreciate it
Hi Nelson,
Good snippet and well explained! But let me suggest this good observation from @Pierre Sudarovich 1 year ago in case you want to complete your post, since your snippet will not work if the Section contains any element with Animation:
“Divi add a inline style “overflow-y: hidden;” to the ID “page-container” as soon as there’s some animated elements on your page. And the CSS attribute “sticky” doesn’t like at all. So you’ll have to add this rule to your CSS stylesheet to avoid the problem:
#page-container.et-animated-content {
overflow-y:initial !important;
}
Link to the post:
https://wordpress.org/support/topic/problem-with-sticky/
Hope it helps! 😉
Thanks Ramon, that’s very insightful and I hope others can take notice!
Hi Nelson.
Many thanks for your tutorials.
I followed your before tutorial to make a fixed header with two sections and it worked perfectly.
Now I just read this new tutorial and would like to apply it to my header.
However I have followed all the steps and my whole header is still fixed. What am I doing wrong?
I would appreciate your help.
Cheers!
Hi there, you mentioned that your whole header is still fixed. Can you explain what you mean? This tutorial is not about making the whole header fixed.
Hi Nelson.
Sorry for my English. it’s not very good.
I mean first I put me header with 2 sections fix and now I want to make sticky one of them.
But i followed the steps of this tutorial and it doesn’t work im my website.
Something I’m doing wrong
Could you help me ?
Many thanks
My page is
https://www.fqeuskadi.org/
Hi Jesus,
It looks like the class is not changing. Do you have the jQuery added?
Hi Nelson.
Yes I added the Jquery in the Divi Theme Options Integration tab of the blog.
Hey. For some reason sticky section of global header isn’t working for me. Anyone able to identify why?
Hi Sean,
If you give us some more information/context we can help!
Sorry, I thought I had included the website in the comment. I got it working. Looks good. Thanks for the tutorial!
Sounds good!
I can’t make the second option work on my site https://terapi-og-udvikling.jacobreinholdt.dk/18-2/
I have really been struggling with it.
I have:
But it is not working (no effect at all) 🙁
I have gone through the steps several times.
The only difference from Nelson’s example is that I am doing it on at Global Header instead of a Custom Header… but that shouldn’t be a problem 🤔
Any suggestions?
Hi Jacob,
Not sure! Usually when we do everything right, it is some simple thing. I’d be happy to take a look! Send me an email and maybe I can get access to the site and take a look!
Could it be that Divi made some changes on an update and caused problems with this method of making a global section sticky?
Thank You Man YOU really save life.
100%
sTuDeNt of YOURS!!👍
Nice! Glad to help! Great to have you as a student 🙂
Im also having the same issue as Jacob with the second option not taking any effect.
I have a global header within the Theme builder.
Its made up of a single section and three rows within that section.
• Top row: login menu and social media follow
• Middle row: Logo and product search bar
• Bottom row: Main menu and cart icon
Im trying to make the bottom row with the main menu sticky.
I added “pa-header” to the bottom row. Advanced tab > CSS ID & Classes > CSS Class > pa-header
I added the jquery code to the Theme options > Integrations > Head >
I added “pa-sticky-header” CSS to Theme options > Custom CSS >
Like Jacob i dont see any effect or changes when scrolling.
Only just started my build but site link is https://golfpricecompare.com
Ive been looking for this solution for a few hours and thought i had found the solution when i watched your Youtube video but i just cant see why its not working for me, any ideas?
Appreciate your tutorials, they were nice and short and well explained, just a shame this one didnt work for me.
Thanks
Hi Ben,
I don’t know what you mean by “second option.” The tutorial is referring to multiple sections, not rows, and I only see one section on your site. So try that! 🙂
Sorry, my fault for not explaining myself better. I was referring to your tut, the second part about “How To Make A Divi Theme Builder Header Menu Sticky This Is Intended For Headers With Multiple Sections”
I also should have mentioned that my header was made up of two sections previously but one was being used for mobile and tablet so didnt think to mention it.
I have re-read the tut, along with your suggestion in your comments reply and have added “pa-header” to a section not a row, my bad for not reading properly.
It doesnt seem to matter where i add “pa-header”, i still dont have this working.
I have tried adding to the section that originally housed three rows which i mentioned earlier. That didnt work.
I then added an additional section to house the main menu row i want made sticky, this didnt work either.
Your tut on making the whole header sticky works for me but its not what im looking for https://www.peeayecreative.com/how-to-make-the-entire-divi-theme-builder-header-fixed
No worries, i will move on and continue building the site for now and return to this closer to when im ready to go live and see if any updates have been made.
Cheers
Hi there, Thanks so much for the great video, should work great. I tried all the solutions multiple time but still can’t see what is wrong. Not working in a simple custom header with 2 sections.
Hi Daniel,
Our tutorial may be what you are looking for: https://www.peeayecreative.com/how-to-make-the-entire-divi-theme-builder-header-fixed/
Hello, thanks that does get me closer. I implemented every solution and went through all the settings and still not working. Thanks so much for your help Nelson!!!
I simply need the menu area to be sticky on scroll.
I downloaded the Sticky menu plugin and it now works. Thanks!
If you want me to take a closer look send me an email 🙂
Hi, great post. I was just wondering if this will work for any theme other than divi theme. I currently have the divi builder plugin on the 2017 theme. Will this work? Thanks
Hi Hal,
I’m not sure, you maybe be able to apply the same concept but all of this was done in Divi so I don’t know how the header works with adding classes and such.
Bonjour et merci pour vos tutoriels 🙂
Malheureusement celui-ci ne fonctionne pas sur mon site et je n’arrive pas à comprendre pourquoi. J’ai pourtant suivi à la lettre vos recommandations.
Sur https://newsite.robedecoeur.fr/ le menu Hamburger (merci pour ça) refuse de s’arrêter en haut !
Auriez-vous une idée d’ou cela peut venir ? et pouvez-vous m’aider ?
Désolé pour la Google traduction.
———————-
Hello and thank you for your tutorials 🙂
Unfortunately this one doesn’t work on my site and I can’t understand why. I followed your recommendations to the letter.
On https://newsite.robedecoeur.fr/ the Hamburger menu (thanks for that) refuses to stop at the top!
Do you have any idea where this might come from? and can you help me?
Sorry for the Google translation.
Hi Tepe, it looks like either you fixed it or it was cache because it is working fine.
Merci, oui j’ai fini par trouver ce qui ne fonctionné pas.
Un mélange avec un autre code JS pour une autre fonction.
Thanks, yeah, I finally figured out what went wrong.
A mix with another JS code for another function.
Hi!
How to make this work for mobile? This code works perfectly in desktop view. Would love to know how to do the same for mobile as well.
Thanks!
I’m not sure why it wouldn’t work on mobile. You’ve tried it and it doesn’t? That makes no sense to me.
I pasted the first code in the right row of my blog page layout (made a layout using Divi theme builder), but Divi doesn’t recognize the ‘sticky’ value and the code doesn’t work.
Using dev tools, the code is accepted but the right row is still not sticky when I scroll down the page.
I added it to:
.et_pb_gutters3 .et_pb_column_1_4, .et_pb_gutters3.et_pb_row .et_pb_column_1_4{
}
I also added the #page-container.et-animated-content { overflow-y:initial !important; } rule to my child theme..
Any idea what I am doing wrong?
Thanks!
Hi Layla,
First of all, Divi pretends to not recognize it, but it still works. I believe I state that and show that in the video. I would use a custom class rather than that the long code you used, too many things that could be wrong in that.
Well, I did paste your code – the exact same – in the second green column that I use to build my blog page layout. But it doesn’t work on the live blog posts. It’s a post layout made with the theme builder (WP Dashboard > Divi > Theme Builder), could that maybe be the problem? (I don’t see why).
The longer code, is how I pasted the code in one of the blog posts (which the Theme Builder layout applies to) using dev tools. It’s the exact same code, applied to the column on a specific blog post. It doesn’t work in there either. So, for me, the code somehow doesn’t work and I have no idea why.
Hi Nelson.
Many thanks for your tutorials.
I followed your tutorial, but it doesn’t work on my site, Do you mind help me take a look. What’s the issue
http://0hy.303.myftpupload.com/
best regards, with deeply thanks
Hi Kam, looks like it is working great. Maybe a local cache issue for you but it is working.
Thanks for the tutorial. I tested it on a section and it worked fine, but it didn’t work when I tried it on a row or module. I’m trying to emulate the donate widget on the right side of this page https://www.cooleffect.org/content/project/brazilian-amazon-rosewood-conservation-project
Can you advise on whether my Divi page is set up correctly?
Hi Jen, looks like you got the donate button sticks fine.
Hi Nelson. Super useful tutorial and both methods work great. I would like to report though that animations within the row does break the effect. I’d also like to request some assistance in turning off the effect just for tablet/mobile. Is that something that’s possible? Many thanks and best regards.
Hi Raees,
Glad you like our tutorials! Interesting, I never use animations so I can’t confirm or deny, but I do know that they do not have the responsive settings so unfortunately I don’t know.
Hi! I love your tuts. Do you know if there’s a good way to use Divi’s new Scroll Effects settings to achieve a stick to top on scroll at x position from top?
Hi Birdie,
I’m not sure about that, I haven’t had a chance to play with this feature much yet.
Hi Nelson,
I am having trouble with this on my website although the tutorial is succinct and so well done!
I am trying to make the section containing the menu in my custom header stick to the top when scrolling while the full screen image above scrolls away and then have the menu stay at the top as I continue to scroll down.
I technically would need to do this with 2 sections as the button section next to the menu also needs to stick, but I cannot even get the menu to stick, so have not tried the 2nd section.
I believe I have followed the instructions exactly, but it has no effect at all. (checked on different devices and browsers too)
Please help 🙂
I am new to Divi, so hoping that there is simple explanation that I an not familiar with yet.
(I have sent my site url via contact form also)
Thanks so much, Jenni
Hi Jenni,
I’m not quite sure what the problem is. I wonder if you could just try the built-in Divi options for this? This tutorial was made before that feature was released, so I would try that first. I see you have the class pa-header added to http://testsite.tnzwebsolutions.nz/ I assume you have added the jQuery and CSS, correct?
Ha, okay… I had not found the built-in function. I will research some more 🙂 Thanks!
Hi Nelson,
Agreed with others, your post is really nice – flow and explanations, concise and educational. Alas, this would have been just what I needed, but like some of the other replies below, the 2nd option (stick a section of your header), didn’t work. I also followed to the tee, and even tried it 3 times to make sure no typos.
I have Divi pages with Animation – saw the other respondee’s note about Sticky doesn’t like animation – but I wasn’t sure where to put it. maybe you can advise me how to do.
Nevertheless, good video – Sam
Hi Sam,
You can do this in Divi now, as this tutorial was before that feature was released. I would recommend just using the built in settings now.
I’ve followed this word for word and can’t seem to get the menu to stick. Please see site here: waterbenders.com.au
I don’t see the fixed css class, so the jQuery must not be there or not applying.
Hi Nelson, and thanks for the tutorial. I followed it step by step, though didn’t work either.
Here’s the link to my page:
https://www.v-app.io/vapptest/smart-vision-analytics/
I am not able to replicate the issue on my end as your section is sticking perfectly fine to the top. This might be a caching issue on your end. Could you please check the URL in the incognito mode and see if that helps?
Let us know how it goes. 🙂
Hi Nelson,
Your tutorials have helped me so much in the past – thanks for that! This one here is the first I can’t get to work – I must be missing out on something. Maybe you can have a look and help? The website is still in progress so please excuse the odd look. Thanks in advance.
Hi Nelson,
Just to let you know that I worked it out by using the stick to top option of the scroll effects. Sometimes it’s really easy. Thanks again for all your great tutorials!
We are really glad that the issue is resolved now. 🙂