How To Change The Divi Header Menu When Scrolling
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- Today I'm showing you how to change the Divi Theme Builder header menu when scrolling, which enables a transparent to color background change!
View written post and snippets: bit.ly/39kJJO4
Fixed, Transparent, And Changing Divi Header - Combining All The Header Tutorials Together
As we go through our Divi header series, you probably notice a few of our tutorials overlap a little. This one works perfectly with two of our other tutorials. Our last one showed us how to create a fixed header in the Divi Theme Builder, and the one before that showed how to have a transparent header with the Divi Theme Builder. This tutorial combines the fixed and transparent tricks and adds on a new one. This Divi tutorial will show you how to change the Divi header when scrolling!
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/
Your tutorials are gold. You touch up on many difficult topics and issues that we run into when building websites with Divi. Even coming from the perspective of someone who is familiar with web development, these tutorials really get to the heart of some common problems that we run into when using Divi. They are super helpful. Keep up the excellent work. I'm glad I found your channel. You definitely have another subscriber here.
Hi Edgar, it is very nice to hear you say that! Thank you for your very kind words and I hope you continue to find our channel very helpful!
Finally a solution that worked for me. Thank you so much! In my opinion it is also the best solution to solve layout shifts issues (cls) that keep popping up in connection with custom headers in Theme Builder. To prevent the default spacing for header section and row from being loaded first, I have also defined them in the global CSS. Keep it up! Liked and subscribed!
How long was I looking for this! Thank you so much. Here, take my sub!
Haha thanks, many more like this coming your way!
Fantastic, this has been driving me mad for far too long! Worked perfectly!
Glad it helped!
Another amazing video. Nelson, your'e just an amazing guy. Thank you for all the time you put into making these tuts.
My pleasure! I'm really glad you enjoy the resources and appreciate the work it takes!
Cool. Really helpful video. You always hit the bulls eye. Perfect
Thank you 😊
Bro you deserve so many more views and subscribers! Thank you for this video
I appreciate that! You're welcome!
Thanks for sharing.
I was looking for this!
You're welcome, glad you found it!
Thanks a bunch! This worked like a charm!
You’re a life saver! Thanks for this :)
You're welcome Catherine, I enjoy this!
omfg i love you so much. Thank you! I've been searching for a while now. Please have my babies.
EDIT: I really hate how Divi prevents you from adding custom CSS if you select an option in their menu like the background colour (they add !important after everything)....
Thanks for the tutorial. Very useful.
You are welcome! :)
Awesome!!! Your stuff is just sooo cool and great! Thanks so much.
Hi Peter, thank you very much! I am truly happy to hear that, and I hope you continue to find value in it!
you're the best! You're my go-to guy for any DIVI issues now!
Thanks Vincent! I'm so glad you are finding my content helpful!
@@PeeAyeCreative I have a question, for some reason, this isn't working on the Categories page of my DIVI Woocommerce site. Works fine on every other page though
That is strange, I know WooCommerce styles override everything, so try making sure ! important is used for all CSS.
@@PeeAyeCreative good point, I'll try that, thank you!
You are God sent!
🙂
Thanks! Liked and subbed! Looking forward to more tutorials :)
Thanks Kerdon, I always have a lot scheduled and I work on more each week, so I hope you enjoy!
You rock!!!! This is exactly what I needed!
That is great to hear!
I spend all night to find this trick..thanks a lot👍
I'm so glad you found this! Hope you enjoy my other videos too!
Thank you so much Bro. Greetings from Bogota, Colombia
You're welcome! Glad to meet you! :)
Thank you so much, really helpful.
Glad it was helpful!
Very helpfull. Indeed it works like a ... Great. It made me pre-order your course for Divi and more. Now I am going to look how to change the color of my menu..... To be continued.
Hi Jeroen, that's good to hear! I've been working hard on the course and I keep uploading more videos. It's going to be a pretty long, thorough course. To change the color would be similar, since "transparent" is kind of like a color. Let me know how it goes or if you need anything!
Thank you so much! You are the best!!!
You're welcome!
Love it! Thanks man !
You bet! Glad you like it!
Super super helpful!
Glad it was helpful!
nice one explained so easily.
Glad you like it!
I watched this an accident but I wanted this fix a few months ago! Will keep in safe spot!
Nice accident! We have several others that go along with this so be sure to check those out as well!
thats sick! thanks man!
You're welcome!
Great video!
Thanks!
fantastic! Thanx a lot! Such a helpful hack!
Glad it was helpful!
Justo lo que buscaba, muchas gracias me acabo de suscribir a tu canal!
Hi Ruben, I'm so happy this helped! Thank you, I hope you enjoy all our videos! :)
Thank you so much!
You're welcome!
Great! Thanks!
You're welcome, Clay! Be sure to check out the other ones on the header as well!
Thank you so much!! I've been really struggling with it until I've found your 2 great tutorials! Is it possible to make the scrolling menu a little bit smaller when scrolling down and add a little bit of dark shadow to the lower part of the menu? My scrolling background is white so i would really like to accentuate it.. I would really appreciate your help :-)!!
You are amazing! I was slamming my head against the keyboard and remade my header so many times!!! Thanks to you it is finally perfect and done!!!!!! I'm so grateful! Thank you ♥
Glad I could help!
I know im asking the wrong place but does anybody know a trick to get back into an Instagram account??
I somehow lost the account password. I would appreciate any tips you can give me!
@Onyx Harper Instablaster ;)
@Anders Julius thanks for your reply. I found the site thru google and I'm trying it out atm.
Takes a while so I will get back to you later when my account password hopefully is recovered.
@Anders Julius it did the trick and I finally got access to my account again. Im so happy:D
Thanks so much, you saved my ass !
thx so much, You got it....a new follower :D
Awesome, thank you!
Just Amazing...
Thanks!
very resourceful video helped a load made my day
I'm glad to hear that, thanks for sharing!
@@PeeAyeCreative i take my words back didnt work for me bro my header just disappears on scrolling when i give my section class name why is this happening can i get some help please?
I don't know. I would have to know everything you did according to the tutorial and blog post, then have a link to see if I see anything obvious.
Love your vids thank you!! I wonder if you, or anyone else in the know here might give a little addition: when starting to scroll down, the menu (remaining fixed briefly, and changing background AND shrinking, like you show in your other superstar video) would then after maybe one second disappear, then when starting to scroll up again, the menu would handily appear again, anticipating navigational needs! In other words: Hide the menu on scroll down and show on scroll up (having shrunk and changed bg) :)
This tutorial save my life haha :D
I'm so glad it was helpful!
Thank you
You're welcome!
Yooo thank you!
Sure thing!
Thnks for the video, you know how i can set the text menu color changes when i scroll down ?
thanks dude
No problem!
exactly what I needed. Thank you!!
did it work for you i just tried it now it didn't work for me
@@therankingworld7627 yes, it worked :)if you didn't, make sure you watch the whole video because he accidentally skipped a step and then had to go back to make it work.
@@AudreyMusic FINALLY GOT IT TO WORK THE CODE IN THE VIDEO IS DIFFERENT FROM THE CODE IN HIS WEBSITE SO THATS WHAT PROBABLY CAUSED IT, ITS WORKING FINE NOW BUT THE PROBLEM IS THE THAT THE HEADER NOW DOESNT CHANGE TO BLACK FOR MOBILE VIEW LIKE IT DOES FOR DESKTOP VIEW, IN MOBILE VIEW ITS STILL TRANSPARENT. DOES YOUR HEADDR TRANSITION FROM TRANSPARENT TO BLACK ON SCROLL ON MOBILE VIEW?
@@therankingworld7627 haven't tried it in mobile yet as I'm still building it so I'm not sure. Sounds like you might just have to do some mobile specific CSS.
You're welcome, you got it working!
If you dont do this in the theme builder there is no way to add the class. The only thing you need to change is the selector in the javascript. Change ".pa-header" to "#main-menu" and this will work. Great video, Thanks very much.
thansk!!!!!!
You're welcome!
Brilliant. Was waiting for that. It would be cool if you added timing. In other words, it happens afrer 2 seconds and it has a transition property for smoothness :)
Oh yes, good idea. I'm not sure why I didn't think of it. I'll update the post!
you are super hero
haha thanks! :)
Hi! Thank you so much for this tutorial. I'm wondering if it is also possible to change the menu text color from white to black when scrolling as I would white text on the photo and also a white header when scrolling down. Would be really helpful if someone knows how to do this!!
Excellent video thank you very much!! It would be great to change the color slowly, I think it's something possible to do I will try to do it.
Yes, you just have to change the transition speed in the CSS. Make sure you refer to the blog post for that code.
Is it at all possible to change the logo from full colour to white after scrolling background changes? It's an old video I know, and I have been able to change the scrolling background in the theme customizer, but I have a client that wants the logo changed too...?
Great tutorial! Would you still use this approach now that Divi has implemented the sticky option on modules?
I'm not sure, I haven't played with them much but do they have a way to change the background color?
Great video... Thanks for uploading it. loving it.... can you please also upload a video where you show how to make this header responsive. when I see the header on Tab or Mobile header width is not 100% and as I am new bee I am not able to fix that. Thanks
You could check into my free course on how to make Divi responsive!
Love the video. Quick question. how do I add a 3px solid border at the bottom. i have teird this but will not work
/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
background-color: #555555!important;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F3C700;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
Thanks man for this. It was a success from my end. Meanwhile, how do I set another logo during scroll instead of a static logo? Also, how do I have another header height during scroll different from when the header is fixed?
Hey there, we have separate videos for both of those things! I don't have the links off hand (on my phone) but you should find them easily on our channel or blog!
Great video. Can you do a tutorial on changing the transparent header to a thinner header that is fixed on scroll? Thanks!
Hi Micheal, I may do that, although you can use this same tutorial for that. You can change the spacing top and bottom on the section for example using the class. Maybe I'll make a separate video to show what I mean!
@@PeeAyeCreative I would be super insterested on this tutorial too :) Your videos are really amazing!! Thanks!!
Nice! Thanks! I have a question: do I need to use a child theme for this code, or can I use the code without a child theme and still have it intact even if I need to update the theme?
great
Thanks!
I see that you always include the code snippets in the Divi theme options. Can I do the same but instead on the theme include in a code module inside a section? And the css can be included in the section, row module?
There are six places you could put code, but I would not recommend using the code module. It's best to put it in your child theme, but I usually say "Theme Options" because I know I have beginners who don't have child themes and that's fine. So the best place I recommend is the Theme Options. Even if you were wanting the code to affect a certain page, it's still best.
hey this is awesome! Thanks so much. but is there no problem that the code is gonna be lost when you update divi? thanks a lot
Hi Karin, nope, anything in Theme Options is fine, or you can use a child theme too!
Is there a way to do this just on the home page but have a different header for all the other pages?
Absolutely, since this is using the Theme Builder you can assign your header template to the home page and a different one on the other pages.
how do you change the color text on menu if the background if whit i need black text color? and how do you change the header logo when scroll down?
You can check the comment sections on the tutorial or ask a developer if you need help with something specific.
Hello, while this article is great, I was wondering if we can implement something like: Transparent header at the beginning, and then instead of just applying a background, we can change the header upon scroll.
I want to implement this and make different color-coded versions of this for individual pages.
Yes, you can use this system to change other things as well. Be sure to check my other tutorials. Here is one: www.peeayecreative.com/how-to-shrink-the-divi-header-menu-when-scrolling/
Is there a way to fade it in and out and set some parameters from where you want it to happen?
Not with this method, maybe with the new Divi feature.
how do I change the menu text color on scroll? this works going to a black BG but what if we want a white BG and the menu text needs to be a color.. how do I achieve that? thanks in advance
You would just target the text module and be sure to add the fixed class in front of the text class.
Thanks for this tutorial! I'm having an issue with my header background photo. The layout I'm going for is similar to what you're working with in the video. Full width photo at the top, and a transparent logo and menu with a background color when scrolling. My problem is that as soon as I start scrolling, the picture disappears rather than sliding up.
Hi Janie, sounds weird, if share the link I can check it.
@@PeeAyeCreative Thank you for the fast reply! The website is mindfulsojourn.com
I set the image as the background for the header and then added the transparent logo and menu over it.
@@janiebedian9437 I checked the site, it's just a full height image. Not sure what the issue is but if you want you can reply, it does not notify me of replies unfortunately so I may or may not see it.
Can the code be edited to change the text color when scrolling too? I want to change the text from white originally to black when scrolling. :)
For sure, just put your code targeting the text or links inside the fixed CSS class.
Hey, great tut. You should do a tut on how to edit some of these premade layouts. Like the juice one. I am having a really difficult time with it.
Thank you! What are you having trouble with exactly? I have a beginner course for Divi on my website, but other than that I guess I assume people where are more intermediate users. Let me know!
@@PeeAyeCreative I having been using Divi for a couple of years, but always worked on the back end where the columns would show up on the row, side by side. I can’t stand them being one on top of the other!!! I can do it on the front end, but my Divi always freezes, then I have to start over. It’s so frustrating. But, I thought it might give you a lot more views if you did one of the premades from start to finish. I would watch the whole thing, and I am sure a lot of others would as well, in particular the juice premade.
Okay I do have other videos though, like it sounds to me like you are talking about the "broken grid" trend with overlaps and stuff. The best advice I can give is to use the "Modified Styles" setting to see exactly what the designers did and what to change.
@@PeeAyeCreative I just redid it myself without using his layout, but thanks.
Nice! How do you get the background image also in the background´s menu?
Hi Martin, what do you mean? Adding an image to the background when scrolling?
@@PeeAyeCreative I meant that you have a "background image", but its not part of the global header, So How you do to be part of it? Because as I see is part of the page. Sorry for my english.
Please I need help, How would I go about change the text color as the background change?
Sure, so if you were targeting the link color of the menu items, you could use .pa-fixed-header .et_pb_menu li a
I found the additional code to also change the font color so this worked for everything except the mobile hamburger menu. It would be helpful if you did another tutorial with snippet code to completely swap Divi header on scroll & not just the background.
Wow - just found another tutorial online & discovered that all this can be accomplished without any CSS code by going to the design tab in the menu module & click the sticky pin for every element to change colors on scroll for everything from background, text, icon, logo etc.
Yes, as you will see on the tutorial, this is depreciated after Divi releaed the update.
How can I change also the text color when scrolling?
You would simply target the text with CSS with the fixed class. When you scroll, that fixed class takes effect and then put whatever you want there with .et_pb_text etc.
It changes back to transparent on hover for me, any idea why this is happening?
Try adding !important to the color and it will work.
How do we adjust this so that it only happens on desktop? The effect doesn't fit the mobile style since its menu is different.
You could simply choose to show this on Desktop by clicking the responsive icon and selection the position for Desktop only.
This doesn't seem to be working for me unfortunately. When i give the class to a row it works but not a section. Why is that?
Hey Man ! Love your tutorials ! I dont know why but it didnt work for me. When i put the section to fixed and background to reset, i get a white menu background but the transition to black works. The problem is just that at the beginning the menu is not transparent its white. Is it possible that the divi update is causing that ? How should i fix this ? Thank you !
Hi Sleid, thank you so much! Did you add the CSS?
Pee-Aye Creative Hey man, yeah followed the tutorial from the beginning. So when the section backround is Set to transparent, i get It transparent But then the css doesn’t do its thing as you explained in the video (nothing happens). And when I change the section background to default (empty) as you explained, then the css works but before the scrolling I get white menu instead of transparent. What could be causing the problem ? Thanks man, you are doing an awesome job !
@@S1EID If you get white instead of transparent, it sounds like you do not have it set as Position>Fixed. Do you? I'll need a link to troubleshoot more.
@@PeeAyeCreative Thank you for your answer. Im currently developing on localhost. Can you please check if this is working for you with the Divi 4.4.2 which is the version i currently have ? Maybe the cause of that is the newer version. Thank you !
Hey Pee-Aye. I'm building a DIVI site locally. I've followed this vid and your blog but I'm still unable to get the black background (or any) to appear when scrolling. I'm 100% sure I'm using the right code in the right places ... it's driving me nuts :)
I'm not sure what to say when I hear something like this. There's no way for me to check. One thing to be sure to check is the blog, sometimes people comment there or sometimes I have extra info. I know it's important how you set the background in the module.
@@PeeAyeCreative Fair point ... I'll head over to the blog, make the site live, try it again and send you the link if still no joy :)
How do I make the scrolling background semitransparent, like, say 50% opacity?
Hi Cathy, very easy, just use the rgba color of your choice at 50% opacity instead of the hex color. So like rgba (0,0,0,0.5)
@@PeeAyeCreative It works! Thank you so much!
Thank you very much for this tutorial but I need to know why my logo is hiding in mobile view
I would need a lot more information to answer that :)
I added a Logo image in my menu module. I think the default behavior of the menu module is that when it is viewed in mobile, the logo image hides.
@@PeeAyeCreative hi there Nelson, hope you can still help me with this issue :( im still having a hard time fixing this. buy the way thanks for all of your videos man. it helped me big time.
Great tutorial. I'm trying to figure out if there's a way to recreate the header on this website: www.ruckusmarketing.com I know Divi just came out with their sticky feature. Is there a way to combine what you show in your video (although it would need to be the opposite - transparent first and then a solid color) with the sticky feature? I'm having trouble figuring out how to make this. Thanks.
I'm not sure about the sticky feature, but with my tutorial you could just do the opposite, right?
@@PeeAyeCreative I'll try it. Thanks.
Unfortunately it does not change color for me. What can i do?
it is not working in my website also.
Hi there, it does work so please be sure to follow it closely. Anything further would require more details.
Hi there, it does work so please be sure to follow it closely. Anything further would require more details.
I can't access my menu module from Visual builder. What am I doing wrong?
I'm not sure
How can I do the same but instead of changing the color, I want to remove the logo on one page only, but at the same time on the same page when I scroll I want the logo to show up only in the fixed menu bar? The reason for this is that I have the logo in a different place on the home page, so I learned how to hide it on one page from menu bar; but I need it in the fixed menu; my code hides everything: .page-id-YOURPAGEIDNUMBER #logo {
display: none;
}
All you have to do is set a different header template in the Theme Builder for that page where you don't want the logo. About changing the logo, I'll have a tutorial soon about that.
The mobile menu is transparent, rather than black. Did I miss something?
Not sure, can you give me more context?
Doesn't work on mobile.
Try asking for help next time :) Do you want me to take a look at your site?