@@PeeAyeCreative Basically, a plugin that'll do what it does now. But instead of one having to do multiple things at multiple places, a single interface that controls everything.
Congratulations dear! unfortunately it doesn't work for me, maybe there are some previous configurations that overlap. Can you reboot everything first and then install your procedure? I have a theme generator with 2 menus, one for the fixed and the other for the mobile.
Thanks a lot for this excellent tutorial!! Very well explained and easy to follow! I needed to change the font size to shrink, as my menu font was already 16px. Then it worked. But the logo size doesn't change. The width of the logo in the header is 70%, so I changed the max-width in the code to 50% and then 20% (to check), but it didn't shrink. Do you have a recommendation? Thanks a lot
For some reason, the custom CSS is not working for the shrinking of the logo or spacing... I have done all the steps and the ones in prior videos to make the header fixed and transparent. Not sure what's going on here....
Great tutorial and just subscribed to this channel! Can someone help me to find the right CSS class to change the background color? .et_pb_section doesn't work...
HI there, thank you, happy to have you along. Have you seen our other tutorial for changing the color when scrolling? Maybe that would help! th-cam.com/video/0V-e71txujY/w-d-xo.html
since you are doing great on menu tutorials may i kindly ask if you can also show us how to close the mobile menu by clicking anywhere on screen as well rather than only clicking hamburger / x icon
Hey Nelson, Thanks for the tutorial. I've tried to submit a few comments on the blog post, but it just keeps disappearing. I'm having some unexpected and undesirable effects when implementing this process. 1. As soon as I add the "pa-header" class, on page load my menu animates from center of the screen. Any idea why it's doing this? Looks like a delay in loading while waiting for the menu to load in or something, but it's not going to work for our site. 2. When I use this process, I'm also getting the overlap of the next section. When I follow the "How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead" tutorial, it's calculating too much padding. Any idea how to adjust these? And is there a better way to request your help as I'm not getting through on your blog. Thanks again for your tutorials and your assistance with this.
Comments on the blog are not visible until approved, so most likely by now there are duplicates. It's extremely generous of me to even reply to all the comments, I get thousands and it costs me thousands of dollars but I do it anyhow, but, I do not guarantee free support and troubleshooting. My assistant will get to the comments as soon as possible.
@@PeeAyeCreative Thank you for your reply. I wasn't complaining, just trying to get in touch. I was able to solve the problem and accomplish the goal with the built in Divi "Stick-to-Top" options. Thank you anyhow. Have a great day.
Nice work. Really enjoying the videos. Wondering if you can help with this one. I want a transparent background on the menu section and on scroll I want it to shrink and then have a background colour, so it can be seen over the content. Does that make sense? It's so easy to do with Theme.co Pro Theme (like a lot of things). I can make it work if I go 100% width on the row, but I want the row at max width 1080px. So, I need the background to be part of the section, not the row. Is it possible? I'll keep trying to work it out, but thanks if you can help.
Hi there, so this video answers your question about the shrinking, and our other video will answer your question about the background color change: th-cam.com/video/0V-e71txujY/w-d-xo.html
I've followed the tutorial but cannot replace my old header, where do these options exist? I think the presumption was made that it would do it automatically but it doesn't, help appreciated.
@@PeeAyeCreative thanks for the reply. I tried adding this code to an additional layout. Got totally lost as a newbie. I get frustrated watching some tutorials.
@@PeeAyeCreative Thanks, appreciate your willingness to help but I have come to the conclusion I have to make the mistakes and learn the divi language properly first. Divi isn't a first time users answers and CSS coding is another realization to how little I actually can do things fast. I got a bit lost in the sales hype I suppose. Thanks for your concern. Because I have already used a pre-defined layout I thought I could apply a new header/menu but it isn't that easy :-(
Amazing video... Question: if I want to target something different then the things already in your code, how do I find the right naming...? e.g. if something for the ".pa-fixed-header" is named ".et_pb_row", how do I find the correct name for the section? I want to adjust the height of the entire section from 74px to 54px. Trying it with: .pa-fixed-header .et_pb_section { height: 54px 0; + the rest of your code... ... didn't work Can I finde the correct names in my own somehow? sorry for that amateur question but I'm figuring things out video by video...
You have the right idea there, I think the issue would be "height" is not going to work well. Try something like padding and you may need to try adding ! important after the code just before the semicolon. Let me know if you need anything specific!
@@PeeAyeCreative Thank you so much! Tried your ideas... and added !important. Unfortunately nothing changes. .et_pb_section is correct wording? Problem is maybe: my section padding is already "zero". My section height is 74px. I'd like to shrink to about 54px. Can't take it off margin because it would just move it upwards cutting off my header. Also, it doesn't work (I tried). Menu logo and text size shrink perfectly. Only Section doesn't go along with it. Just FYI: philippdoerfler.com (already used so many of your tutorials), probably going to buy responsive helper asap.
Hi, thank you for your tutorial. But there is one problem for me. It works after I scroll down. But the Section still have space, look like it's not 0px padding. There is space between the logo and the section bottom. How to fix it? Thank you! I used .pa-header .et_pb_image_wrap img { instead of .et_pb_menu__logo
Thanks for your content!! This works great for me with the logo and menu, but I can't get the header to shrink (first step) :( any ideas on how to solve this?
I have the same issue. Adding !important doesn't make a difference either. @Nilsa did you manage to get it to work? If so, would you pleas share how you did that?
Pee-Aye Creative I just meant sir does the logo and header shrink on mobile scroll which I think would be amazing🙏🏻📱⚡️✌🏻 Also do you have some magic CSS for the header to slide up/away on scroll then slide back into view as soon as a viewer scrolls up (my fav men style and on all devices)? YOU ROCK!!
Hi Towe, not sure what you mean. You can adjust the size of the logo. And it works fine when scrolling up, at the top, maybe not during the scroll (because that would be fixed).
Thanks so much. I could not find anyone else with this information.
Nicely done. I combined this with your video on moving the logo from top center to the left of the menu and it's working great! You rock!
That's great!
Excellent tutorial. I was trying to figure out how to do this and found your content. Very helpful. Thanks again.
Glad it was helpful!
Another fantastic tutorial, thanks so much!
You're very welcome! I'm glad you are enjoying my content :)
Looks cool! Nice piece!
You are very welcome! :)
I like this video!!
Great, I hope it is helpful!
Its great lesson, great video for us, thanks a lot...
Glad you liked it!
Amazing tutorial!
Glad you think so!
Hi ! is it also OK with latest versions of Divi (05-2023) ?
Sure this will probably always be relevant.
very nice, but when you make the position fixed, all the site content moves upward under the header. any idea to fix this?
Yes, my next tutorial is a way to fix this automatically! PM me if you need it before Tuesday 😊
@@PeeAyeCreative Thanks man! I'm looking forward to the next tutorial and guessing to add top margin to the main section ;-)
Hi sir, i got a header pack header, using already some CSS also for some hover-effects, is it possible to use both? So ur shrink and the pack+css ?
??
Is it possible to create a plugin from this?
It would be possible. What would you want to be included and how would it work?
@@PeeAyeCreative Basically, a plugin that'll do what it does now. But instead of one having to do multiple things at multiple places, a single interface that controls everything.
Congratulations dear! unfortunately it doesn't work for me, maybe there are some previous configurations that overlap. Can you reboot everything first and then install your procedure? I have a theme generator with 2 menus, one for the fixed and the other for the mobile.
I'm sorry to hear it does not work for you. Please review the tutorial carefully again and maybe you will get it.
Thanks a lot for this excellent tutorial!! Very well explained and easy to follow! I needed to change the font size to shrink, as my menu font was already 16px. Then it worked.
But the logo size doesn't change. The width of the logo in the header is 70%, so I changed the max-width in the code to 50% and then 20% (to check), but it didn't shrink. Do you have a recommendation? Thanks a lot
For some reason, the custom CSS is not working for the shrinking of the logo or spacing... I have done all the steps and the ones in prior videos to make the header fixed and transparent. Not sure what's going on here....
Hi Melbee, I don't know without a link it would be a crazy guess.
Great tutorial and just subscribed to this channel! Can someone help me to find the right CSS class to change the background color? .et_pb_section doesn't work...
HI there, thank you, happy to have you along. Have you seen our other tutorial for changing the color when scrolling? Maybe that would help! th-cam.com/video/0V-e71txujY/w-d-xo.html
@@PeeAyeCreative Thank you!
Hi. thanks for your great informative tutorials. Do you know how to upload Adobe fonts on Divi wordpress site?
You're welcome! I've never don't that. I see Elegant Themes has a blog post about that though.
since you are doing great on menu tutorials may i kindly ask if you can also show us how to close the mobile menu by clicking anywhere on screen as well rather than only clicking hamburger / x icon
Hmm, anywhere on the screen would be in the way of the menu items, so I'm not sure I understand. Do you have an example?
Hey Nelson, Thanks for the tutorial. I've tried to submit a few comments on the blog post, but it just keeps disappearing. I'm having some unexpected and undesirable effects when implementing this process. 1. As soon as I add the "pa-header" class, on page load my menu animates from center of the screen. Any idea why it's doing this? Looks like a delay in loading while waiting for the menu to load in or something, but it's not going to work for our site. 2. When I use this process, I'm also getting the overlap of the next section. When I follow the "How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead" tutorial, it's calculating too much padding. Any idea how to adjust these? And is there a better way to request your help as I'm not getting through on your blog. Thanks again for your tutorials and your assistance with this.
Comments on the blog are not visible until approved, so most likely by now there are duplicates. It's extremely generous of me to even reply to all the comments, I get thousands and it costs me thousands of dollars but I do it anyhow, but, I do not guarantee free support and troubleshooting. My assistant will get to the comments as soon as possible.
@@PeeAyeCreative Thank you for your reply. I wasn't complaining, just trying to get in touch. I was able to solve the problem and accomplish the goal with the built in Divi "Stick-to-Top" options. Thank you anyhow. Have a great day.
Nice work. Really enjoying the videos. Wondering if you can help with this one. I want a transparent background on the menu section and on scroll I want it to shrink and then have a background colour, so it can be seen over the content. Does that make sense? It's so easy to do with Theme.co Pro Theme (like a lot of things). I can make it work if I go 100% width on the row, but I want the row at max width 1080px. So, I need the background to be part of the section, not the row. Is it possible? I'll keep trying to work it out, but thanks if you can help.
Hi there, so this video answers your question about the shrinking, and our other video will answer your question about the background color change: th-cam.com/video/0V-e71txujY/w-d-xo.html
I've followed the tutorial but cannot replace my old header, where do these options exist? I think the presumption was made that it would do it automatically but it doesn't, help appreciated.
Hi Steve, what do mean about replacing your old header? This tutorial uses the Theme Builder.
@@PeeAyeCreative thanks for the reply. I tried adding this code to an additional layout. Got totally lost as a newbie. I get frustrated watching some tutorials.
I'm sorry, with anything it is a learning curve. Let me know what you need and I can see if I can help.
@@PeeAyeCreative Thanks, appreciate your willingness to help but I have come to the conclusion I have to make the mistakes and learn the divi language properly first. Divi isn't a first time users answers and CSS coding is another realization to how little I actually can do things fast. I got a bit lost in the sales hype I suppose. Thanks for your concern. Because I have already used a pre-defined layout I thought I could apply a new header/menu but it isn't that easy :-(
@@PeeAyeCreative When I am up to speed, I will come right back here :-)
Sir, it just shrinks the logo width, not in height?
I'm not sure what you mean
Amazing video... Question: if I want to target something different then the things already in your code, how do I find the right naming...? e.g. if something for the ".pa-fixed-header" is named ".et_pb_row", how do I find the correct name for the section? I want to adjust the height of the entire section from 74px to 54px.
Trying it with:
.pa-fixed-header .et_pb_section {
height: 54px 0;
+ the rest of your code...
... didn't work
Can I finde the correct names in my own somehow?
sorry for that amateur question but I'm figuring things out video by video...
You have the right idea there, I think the issue would be "height" is not going to work well. Try something like padding and you may need to try adding ! important after the code just before the semicolon. Let me know if you need anything specific!
@@PeeAyeCreative Thank you so much! Tried your ideas... and added !important. Unfortunately nothing changes. .et_pb_section is correct wording?
Problem is maybe: my section padding is already "zero". My section height is 74px. I'd like to shrink to about 54px. Can't take it off margin because it would just move it upwards cutting off my header. Also, it doesn't work (I tried).
Menu logo and text size shrink perfectly. Only Section doesn't go along with it.
Just FYI: philippdoerfler.com (already used so many of your tutorials), probably going to buy responsive helper asap.
Hi, thank you for your tutorial. But there is one problem for me.
It works after I scroll down. But the Section still have space, look like it's not 0px padding. There is space between the logo and the section bottom. How to fix it? Thank you!
I used .pa-header .et_pb_image_wrap img { instead of .et_pb_menu__logo
Hi Johns, I'm not sure, would need to inspect the site to see the issue and provide any helpful advice.
@@PeeAyeCreative I have sent you an email about my problem. Thank you so much!
Thanks for your content!! This works great for me with the logo and menu, but I can't get the header to shrink (first step) :( any ideas on how to solve this?
Hi Nilsa, you can try adding !important to the padding, that should do the trick.
I have the same issue. Adding !important doesn't make a difference either. @Nilsa did you manage to get it to work? If so, would you pleas share how you did that?
@@MultiPJoys did you manage to find a solution?
@@aronlukacs5978 No
hi thanks, but in responsive not work?
Does it?
For some reason the text in the header is all blurry after doing this. Did that happen to anyone else?
Hi Mercy, that's weird, are you shrinking the menu text?
Very Cool! Does this work on mobile view also? 🙏🏻📱⚡️
On mobile the menu changes to the hamburger menu, so it doesn't really apply.
Pee-Aye Creative I just meant sir does the logo and header shrink on mobile scroll which I think would be amazing🙏🏻📱⚡️✌🏻 Also do you have some magic CSS for the header to slide up/away on scroll then slide back into view as soon as a viewer scrolls up (my fav men style and on all devices)? YOU ROCK!!
For some reason, DIVI won't save when I enter this code. Not even when I put it in a code module.
This issue would not be related to this tutorial or code.
@@PeeAyeCreative Thanks for the quick response! It turned out to be Modsecurity on my server.
For me this tutorial works great in Safari, but in Chrome the logo becomes very small when scrolling and doesn't expand again when scrolling to top.
Hi Towe, not sure what you mean. You can adjust the size of the logo. And it works fine when scrolling up, at the top, maybe not during the scroll (because that would be fixed).
when its fixed, the content is going up under my header
Right, because it's fixed...
@@PeeAyeCreative i AM green, so how to make it display below menu?
nothing Works
If you want anything productive to come of this comment then please share some details.
@@PeeAyeCreative hey, didnt think u would see my comment, i tried every step of the tutorial but nothing worked