Another knockout! As I update a couple of older sites I was looking for a way to make some of these adjustments to the header menus and you hit every point. Great vid, thank you so much!
That is very kind and it is always good to have feedback when you have put time into making a video. I plan to make a full course but it will take a long time!
Honestly my problem with this is that there's no minimum width to the navbar content, so it begins resizing immediately and its width really doesn't follow that of a page's content which generally doesn't start resizing until quite a while into the window getting smaller. As for anyone wondering the same, I essentially just removed the % padding on the row and instead added a max-width equal to my page content on the menu widget then centered it. That way it doesn't resize with the window until it actually needs to and mirrors the content width of the page. You can re-add some padding to the row to set hard limits which match your content limits once the window is small enough.
Yes, great tip. It is always hard to know whether to put a hard "max-width" limit on both the page content and nav. Typically now I will go with a max-width of 1366px on both. Sometimes I stick with the 80% and you then need to set a preset to apply this to your content rows too for it all to work.
You really explain better than others, thanks a lot from Italy! All your instructions worked smoothly, but now I'm facing a small issue: I have a code in the footer, a button for a popup privacy policy, which displays partially underneath the sticky menu. Do I need some CSS to solve?
Thanks for a great tutorial. At around the 23.30 mark you mention a link to get hold of the blurb row in the description but I can't see it. Is it still available anywhere? Thanks
Thank you for very informative and easy to understand tutorial video. One thing I have a problem with is when I set backgound image in Fullwidth Header Settings, background color does work. But I set the image in Section Settings and set a background color in Fullwidth Header Settings, the color overlays the image and opacity setting works. Am I doing something wrong?
hello and thanks for the wonderful tutorial! I have a problem, when I set the row profession to absolute, the height of the section is reduced to 0 although it remains reported as auto in the sizing options. I don't understand how to fix it, hope that someone can help me. Thank you from Italy
Thank you! That is correct. If you look at 18:00, I remove all padding and spacing from the section. Once the row position is set to “absolute” it no longer sits inside the section and as the section has no content, padding or margin the size will be zero. This does not stop the header working.
@@divicoaching thanks, I found the problem. In the last stages of the design, I had put a transparent color on the raw instead of simply eliminating the color. This compromised the transparency effect of the entire header
Hey. Thanks for this awesome video. Can you help me, on mobile the sticky menu disappears when i open the hamburger and closed ist. I don´t have any idea how to fix it.
At the 22nd minute, you go to advanced and set it to relative. Then in row settings you set position on absolute and center. Why? You explain a bit but i am.a beginner and dont understand any of what is going on there. Why set to relative? Wgy set to absolute? What does this do? What problem does it solve?
Hi and thanks for your question. Positioning in CSS is quite a big subject but have a read here to understand better. www.w3schools.com/css/css_positioning.asp. I have used position absolute to make the menu sit on top of the background. Without this you would have the menu row sitting at the top as usual. I hope this makes sense. You can easily see what this is doing by omitting this step and seeing what happens.
Fearful, anxious, but above all: thankful for your video and message. I will try and see what happens! On another note. If one would like to set a member login/signup button to the right of these menu items, would it be adviseable to use a row with two columns instead of a row with only one column you did incthe video? The login/signup button wpuld then be added to the right column. Is that a legit way of going about adding a login/signup button in a header that has a menu in it? Learning! Thank you. Your videos are amazing, really.
Only thing missing is a search bar to be added. Would you have a vid that by any chance also includes that? So that way i would have a site logo | menu items | search bar | two ccs styled CTA buttons. If you dint have this sort of video, no worries. You are just such a good teacher. Enjoying your channel anyhow!
I have done this a few times now and works perfectly. I noticed that divi doesn’t have an option to change the logo on scroll. I have a friend who loves this style I did for him and has asked if I could change the logo when scrolling is activated. On the transparent view the logo is white but the on scroll he wants his coloured logo version. I know I can use the hue and saturation but that doesn’t match his coloured logo. Have looked for a workaround but so far all are a bit clunky. Do you have any advice or some article you might know that could help ?
Scroll near the bottom of this and it explains it pretty well. www.elegantthemes.com/blog/divi-resources/how-to-change-your-sticky-logo-on-scroll-with-divi
Hi Paul, Thanks for this tutorial. I have built a homepage using this system which is fine on the desktop but I get the old background jumping on scroll issue on tablet and mobile. Can this be fixed? Jim R
Hi Jim. I am sure it can be fixed! It may being a caching issue with old cached items. I would turn off all of the Divi performance options (turn on again when you finish building), go to builder>advanced in options and clear the static cache. Also clear any hosting caching. Do you have a link I can look at?
Great tutorial :) .. I still have a problem left: my header section is on sticky position.. when I go into my row-settings, there is no pin there to adopt the sticky position design options.. what did I do wrong?
When you say in your row settings are you, for example, looking at something like padding? There should be a sticky option there. If in doubt then just run through once more checking each step. It is not super-intuitive and even making this tutorial I had to redo things a few times to get it working properly. Can have more of a look tomorrow if you are still stuck.
This was very helpfull, thank you! But what if I have a logo that is multi-colored, and I want to change the whole Image to another version of the logo (on scroll)?
Glad you found this useful. You need a little bit of CSS to change the logo on sticky. See this post from Elegant Themes www.elegantthemes.com/blog/divi-resources/how-to-change-your-sticky-logo-on-scroll-with-divi#:~:text=To%20change%20the%20logo%20in,That's%20it!
Just passing by to say thank you again! Your videos have been so useful since I started on divi last year. This is just what I was ask last weekend to do!! Do you do this videos just to help people like me or is this part of a training course? and if it is part of a course where can I buy it?
Thank you so much for this feedback. At the moment I do this to build my teaching and video skills alongside a full time career in a completely different field. My plan is to move full time to coaching and producing courses over the next year starting with a full Divi course. I will make plenty of noise when I am ready to release it!!
Great video - I am having a problem with alignment when I scale the page (in desktop view) the logo doesn't stay in alignment with the website content, even though the padding for both is set to 15% - any idea how to fix this?
Hi. I'm really interested in learning more building custom headers but when I try to add a menu, it doesn't create it as navigation like in your video, it creates an unordered list with bullet points. Where am I messing up?
Hi Chad. A menu *is* just an unordered list and the styling is added in Divi. Are you saying that if you add a MENU Divi module and select a menu from the Menu dropdown in the content tab of menu settings it just appears as bullets? Have you created menus before successfully on this installation? Are you seeing the bullets in the builder or on the front end of the site (or both)?
Not quite sure what you mean. I am building a global header in the theme builder and then the page as the homepage. The header will work on all pages, but you would probably build a slightly different one for pages where you don't need a transparent header. Not sure if that answers your question?
@@divicoaching Thanks for responding! I've been making my pages as normal place holders, and then I build them in the theme builder. I got confused because you built your header in the theme builder, but the page was done using the divi builder on the page (visual builder front end) rather then inside the theme builder. Is there a difference? Should I change my workflow to better things? Thanks!
You need to view the theme builder items as templates as anything you add here (including copy etc) will appear on every page that you apply that template to. I almost never use the "body" part of the theme builder. I build as many different headers and footers as I need for the site in the theme builder and assign them to the relevant pages. Each page is then built using the page builder on the front end. This is the "normal" Divi workflow. The exception is "posts" where it is normal to build a "body" template which drives the styling and then individual posts are built using the block editor. All very confusing to start! See Maks vid here ua-cam.com/video/hSDtlO4OLP8/v-deo.html
@@divicoaching Thanks for the advise, I like this. Just to clarify...? Make all of my header, footer and dynamic templates for (WooCommerce, Blog Posts & Post types) in the theme builder? All of the body stuff should be built on the front end using the page builder, right? FYI, this would make for a great UA-cam video to clear up the confusion. Thanks!
Yes that's the way Divi is designed. Header and Footers in the theme builder + templates only for body content which can be populated from Guttenburg. Or you can just make pages in the page builder with no template. A vid is a good idea 💡
Yes. But I always try to build everything in my tutorials as people really appreciate this. The "chapters" do reflect this and viewers can always skip to the menu build if they want. Did you think this was a bad thing?
I followed instruction in video, but problem is my menu is always in sticky position, what I mean by that is when I refresh page and when scroll is on top of the windows it's already in sticky position which means my sticky background is always showing... don't know what to do pretty stuck after 1hour trying to fix it. No solution on google.
Hi Nikola. I suggest you work slowly through the tutorial again to find where you went wrong. Maybe you set some of the sticky settings in the 'non-sticky' tab by mistake?
@@divicoaching Thanks for replying, to be honest I was losing my mind little bit but I figured out that section margin was -1px and when I corrected that to 0px everything was fine. :D
Hi. I'm sorry if you are not seeing this. The tutorial steps definitely work, but it is very easy to miss a step out. I suggest back tracking and working slowly through it again.
You have to be really careful that you follow every step and set the correct options. I have checked and this all definitely works. Where are you not seeing a sticky option?
You need to be sure that in the header>section>advanced>scroll effects you have enabled "stick to top". Otherwise you won't see the sticky option icon.
@@divicoaching hi there, I also have an issue, I did set sticky to top exactly like you say here, but its not sticky at all when I scroll and I cannot set different background, colors for this option as the sticky option for editing also doesnt show...
It's only there when the option is available. If you haven't set the item to stick in "scroll effects" you won't see it and then it will only show on properties that you can set a sticky option.
Finally someone has the brains to make this complex process simple - thank you.
Thank you. I'm so glad you found this useful. Some things in Divi are amazing but often not super-intuitive when it comes to actually building them.
Great to see you are back , we missed you
Well that's very kind. Hopefully able to get lots more out over the Winter!
Another knockout! As I update a couple of older sites I was looking for a way to make some of these adjustments to the header menus and you hit every point. Great vid, thank you so much!
Thank you. More to come soon...
Fabulous tutorial! Appreciate the step-by-step explanations! Thank you
Glad it was helpful!
Thank you sir, very helpful. I don't comment often but I felt compelled to do so. I would definitely buy a complete course on Divi from you.
That is very kind and it is always good to have feedback when you have put time into making a video. I plan to make a full course but it will take a long time!
You have such a command of all of the Divi options on the fly. So helpful!
Thanks Glen. That's the beauty of editing and practicing that demo quite a few times! Glad you found it useful.
Thank you so much for taking the time to show us step by step
Thank you. I enjoyed making this one!
Great tutorial, thank you. Finally one that's easy to follow step by step.
Thank you.
just stumble on your amazing channel, your videos really helped a beginner like me
Well thank you. More soon hopefully...
Absolutely fantastic! Thank you very much for this great support. Always a pleasure.
Thank you for the great feedback. Hoping to get another out in the next couple of weeks.
This is a great tutorial, really clear and precise, excellent!
Great. Thank you. Really pleased you found it useful.
Love you work DiviCoach very intuitive and fun!
Thank you. I've not had "fun" in the comments before 😂
Many thanks! Your presenting style is excellent, thorough and personable.
Thanks John! I can't ask for a better review than that. Just need to find time to make more.
You are a legend sir! Thank you!
You are too kind! More coming once Divi 5 emerges from the wrappers…
Wonderful Tutorial! i need to give credit for this tutorial. Great result!
Thank you. Glad it was helpful!
Watched this again 😂😂 absolutely superb 👍
Oh good. That makes me happy!
Absolute genius, thanks for your time!
Thank you. I'm glad you found this useful!
Amazing work. Really helpful.
🙏 thank you. I am pleased you found this helpful.
Great tutorial. It can be hard getting Divi to work fully responsivly and this is really helpful!
Glad it was helpful!
Your tutorial are spot on! The best out there! Thank You!
Many thanks! I am pleased you find them useful.
Honestly my problem with this is that there's no minimum width to the navbar content, so it begins resizing immediately and its width really doesn't follow that of a page's content which generally doesn't start resizing until quite a while into the window getting smaller. As for anyone wondering the same, I essentially just removed the % padding on the row and instead added a max-width equal to my page content on the menu widget then centered it. That way it doesn't resize with the window until it actually needs to and mirrors the content width of the page. You can re-add some padding to the row to set hard limits which match your content limits once the window is small enough.
Yes, great tip. It is always hard to know whether to put a hard "max-width" limit on both the page content and nav. Typically now I will go with a max-width of 1366px on both. Sometimes I stick with the 80% and you then need to set a preset to apply this to your content rows too for it all to work.
commended thank you for sharing your knowledge!
Welcome! Thank you for your support. More on the way with the roll out of D5.
Thank you for the sensational tutorial. The video is super done and was a great help to me. Thank you.
🙏 thank you for you kind words.
Thank you so much for this video. Finally I know how to set the mobile properties correctly 😊
Thank you. I need to make one on the mobile menu in general... It's on the list!
@@divicoachingthat would be great. It's something I struggle with a lot
Learned a lot; thanks for the great, concise lesson with no messing about
Thank you. Glad you found this useful ☺️
amazing tutorial made my day
I am glad you enjoyed it. Thank you.
BEAUTIFUL.
Thank you!
You really explain better than others, thanks a lot from Italy!
All your instructions worked smoothly, but now I'm facing a small issue: I have a code in the footer, a button for a popup privacy policy, which displays partially underneath the sticky menu. Do I need some CSS to solve?
Are you able to share a screen shot of the issue or maybe DM me a link to the site?
Every of your video is so helpful. Thank you so much!
Glad you like them!
This is an amazing tutorial. Looking forward to so much more. Thank you so much!!
Well thank you sir!
Amazing 🤩 thanks
Thank you. It's always great to hear that people have found my vids useful 👍
Thanks for a great tutorial. At around the 23.30 mark you mention a link to get hold of the blurb row in the description but I can't see it. Is it still available anywhere? Thanks
Once I find a backup! Unfortunately I re-built the server and forgot about these links 🙄 Will try to get it back up this weekend.
Ok I found the assets. Blurb row to import and images. Unzip first. header.divicoaching.com/wp-content/uploads/2024/02/Header.zip
Thank you for very informative and easy to understand tutorial video. One thing I have a problem with is when I set backgound image in Fullwidth Header Settings, background color does work. But I set the image in Section Settings and set a background color in Fullwidth Header Settings, the color overlays the image and opacity setting works. Am I doing something wrong?
Sorry, It has been solved :)
hello and thanks for the wonderful tutorial!
I have a problem, when I set the row profession to absolute, the height of the section is reduced to 0 although it remains reported as auto in the sizing options. I don't understand how to fix it, hope that someone can help me. Thank you from Italy
Thank you! That is correct. If you look at 18:00, I remove all padding and spacing from the section. Once the row position is set to “absolute” it no longer sits inside the section and as the section has no content, padding or margin the size will be zero. This does not stop the header working.
@@divicoaching thanks, I found the problem. In the last stages of the design, I had put a transparent color on the raw instead of simply eliminating the color. This compromised the transparency effect of the entire header
Thank you for the explanation and work for this.
Welcome! I am glad you found this helpful.
Wow! This video is fantastic. Thank you so much
You're very welcome!
Great Tuto !
Thank you! Glad you found it useful.
Hey. Thanks for this awesome video. Can you help me, on mobile the sticky menu disappears when i open the hamburger and closed ist. I don´t have any idea how to fix it.
Hard without being able to have a look. Is the URL visible?
@@divicoaching yes. but i cant send you. kgs goldstrasse de
Thanks so much for this video. Best wishes.
Thank you. I hope you find it useful.
At the 22nd minute, you go to advanced and set it to relative. Then in row settings you set position on absolute and center. Why? You explain a bit but i am.a beginner and dont understand any of what is going on there. Why set to relative? Wgy set to absolute? What does this do? What problem does it solve?
Hi and thanks for your question. Positioning in CSS is quite a big subject but have a read here to understand better. www.w3schools.com/css/css_positioning.asp. I have used position absolute to make the menu sit on top of the background. Without this you would have the menu row sitting at the top as usual. I hope this makes sense. You can easily see what this is doing by omitting this step and seeing what happens.
Fearful, anxious, but above all: thankful for your video and message. I will try and see what happens!
On another note. If one would like to set a member login/signup button to the right of these menu items, would it be adviseable to use a row with two columns instead of a row with only one column you did incthe video? The login/signup button wpuld then be added to the right column. Is that a legit way of going about adding a login/signup button in a header that has a menu in it? Learning! Thank you. Your videos are amazing, really.
You'll be fine! On the button issue have a look at this and I am sure you can adapt it to work. ua-cam.com/video/li3gFGjCSIs/v-deo.html
Wonderful. Exactly what I needed! Subscribed!
Only thing missing is a search bar to be added. Would you have a vid that by any chance also includes that? So that way i would have a site logo | menu items | search bar | two ccs styled CTA buttons. If you dint have this sort of video, no worries. You are just such a good teacher. Enjoying your channel anyhow!
I have done this a few times now and works perfectly. I noticed that divi doesn’t have an option to change the logo on scroll. I have a friend who loves this style I did for him and has asked if I could change the logo when scrolling is activated. On the transparent view the logo is white but the on scroll he wants his coloured logo version. I know I can use the hue and saturation but that doesn’t match his coloured logo. Have looked for a workaround but so far all are a bit clunky. Do you have any advice or some article you might know that could help ?
Scroll near the bottom of this and it explains it pretty well. www.elegantthemes.com/blog/divi-resources/how-to-change-your-sticky-logo-on-scroll-with-divi
@@divicoaching Hi, thankyou that works perfectly.
Hi Paul, Thanks for this tutorial. I have built a homepage using this system which is fine on the desktop but I get the old background jumping on scroll issue on tablet and mobile. Can this be fixed? Jim R
Hi Jim. I am sure it can be fixed! It may being a caching issue with old cached items. I would turn off all of the Divi performance options (turn on again when you finish building), go to builder>advanced in options and clear the static cache. Also clear any hosting caching. Do you have a link I can look at?
Great tutorial :) .. I still have a problem left: my header section is on sticky position.. when I go into my row-settings, there is no pin there to adopt the sticky position design options.. what did I do wrong?
When you say in your row settings are you, for example, looking at something like padding? There should be a sticky option there. If in doubt then just run through once more checking each step. It is not super-intuitive and even making this tutorial I had to redo things a few times to get it working properly. Can have more of a look tomorrow if you are still stuck.
This was very helpfull, thank you!
But what if I have a logo that is multi-colored, and I want to change the whole Image to another version of the logo (on scroll)?
Glad you found this useful. You need a little bit of CSS to change the logo on sticky. See this post from Elegant Themes www.elegantthemes.com/blog/divi-resources/how-to-change-your-sticky-logo-on-scroll-with-divi#:~:text=To%20change%20the%20logo%20in,That's%20it!
@@divicoaching Thank you so much! I was looking for this :D
Just passing by to say thank you again! Your videos have been so useful since I started on divi last year. This is just what I was ask last weekend to do!! Do you do this videos just to help people like me or is this part of a training course? and if it is part of a course where can I buy it?
Thank you so much for this feedback. At the moment I do this to build my teaching and video skills alongside a full time career in a completely different field. My plan is to move full time to coaching and producing courses over the next year starting with a full Divi course. I will make plenty of noise when I am ready to release it!!
Very thanks!
You're welcome!
Great video - I am having a problem with alignment when I scale the page (in desktop view) the logo doesn't stay in alignment with the website content, even though the padding for both is set to 15% - any idea how to fix this?
Hi Tyler. Are you able to send me a link? You can mail me if you don't want to put in the comments paul@divicoaching.com
Thank you
Welcome!
Doesnt work for me, Menu keep white while i setup the section row like in this video.
Hi. Sorry you are having problems with this. It definitely works. Maybe try working through it again? Do you have a link for me to take a look?
I find out the problem.... in the row seting, go to advance, and change the position to absolute.
Very nice
Thanks Tony. Pleased you found this useful.
Hi there! How can I hire you… this is so fantastic! But so hard to do… thank you
Hi. Hiring me is easy - just mail me - paul@divicoaching.com and let me know what you need.
Hoy can I solve the Logo size in mobile and pinned? It looks so small and I dont see the option
In need a bit more info. Do you have a link?
finally found the solution after wasting a full week
Sorry about your wasted week but glad you got there!
Sticky pin icon no longer showing up for a lot of people even after they've enabled "stick to top" in advanced options.
Is that a recent thing? I made another tutorial on Monday with a sticky header. Latest Divi update. No issues. In which module do you not see the pin?
Hi. I'm really interested in learning more building custom headers but when I try to add a menu, it doesn't create it as navigation like in your video, it creates an unordered list with bullet points. Where am I messing up?
Hi Chad. A menu *is* just an unordered list and the styling is added in Divi. Are you saying that if you add a MENU Divi module and select a menu from the Menu dropdown in the content tab of menu settings it just appears as bullets? Have you created menus before successfully on this installation? Are you seeing the bullets in the builder or on the front end of the site (or both)?
Hello! Why do you use the page builder rather then the template builder to make the body & header?
Not quite sure what you mean. I am building a global header in the theme builder and then the page as the homepage. The header will work on all pages, but you would probably build a slightly different one for pages where you don't need a transparent header. Not sure if that answers your question?
@@divicoaching Thanks for responding! I've been making my pages as normal place holders, and then I build them in the theme builder. I got confused because you built your header in the theme builder, but the page was done using the divi builder on the page (visual builder front end) rather then inside the theme builder. Is there a difference? Should I change my workflow to better things? Thanks!
You need to view the theme builder items as templates as anything you add here (including copy etc) will appear on every page that you apply that template to. I almost never use the "body" part of the theme builder. I build as many different headers and footers as I need for the site in the theme builder and assign them to the relevant pages. Each page is then built using the page builder on the front end. This is the "normal" Divi workflow. The exception is "posts" where it is normal to build a "body" template which drives the styling and then individual posts are built using the block editor. All very confusing to start! See Maks vid here ua-cam.com/video/hSDtlO4OLP8/v-deo.html
@@divicoaching Thanks for the advise, I like this. Just to clarify...? Make all of my header, footer and dynamic templates for (WooCommerce, Blog Posts & Post types) in the theme builder? All of the body stuff should be built on the front end using the page builder, right? FYI, this would make for a great UA-cam video to clear up the confusion. Thanks!
Yes that's the way Divi is designed. Header and Footers in the theme builder + templates only for body content which can be populated from Guttenburg. Or you can just make pages in the page builder with no template. A vid is a good idea 💡
Title content (re: menu) starts minute 15:41
Yes. But I always try to build everything in my tutorials as people really appreciate this. The "chapters" do reflect this and viewers can always skip to the menu build if they want. Did you think this was a bad thing?
I followed instruction in video, but problem is my menu is always in sticky position, what I mean by that is when I refresh page and when scroll is on top of the windows it's already in sticky position which means my sticky background is always showing... don't know what to do pretty stuck after 1hour trying to fix it. No solution on google.
Hi Nikola. I suggest you work slowly through the tutorial again to find where you went wrong. Maybe you set some of the sticky settings in the 'non-sticky' tab by mistake?
@@divicoaching Thanks for replying, to be honest I was losing my mind little bit but I figured out that section margin was -1px and when I corrected that to 0px everything was fine. :D
Can you do this with the logo in the middle? Because it's not working.
Sure. See here header.divicoaching.com/test/. All I have changed is menu position to "Center" for this page.
i dont have sticky option
Hi. I'm sorry if you are not seeing this. The tutorial steps definitely work, but it is very easy to miss a step out. I suggest back tracking and working slowly through it again.
I don't seee the sticky option. Did it move?
On the row?
same did u find any solution?
You have to be really careful that you follow every step and set the correct options. I have checked and this all definitely works. Where are you not seeing a sticky option?
You need to be sure that in the header>section>advanced>scroll effects you have enabled "stick to top". Otherwise you won't see the sticky option icon.
@@divicoaching hi there, I also have an issue, I did set sticky to top exactly like you say here, but its not sticky at all when I scroll and I cannot set different background, colors for this option as the sticky option for editing also doesnt show...
i am sure this was brilliant when there was a sticky icon in the settings.
It's only there when the option is available. If you haven't set the item to stick in "scroll effects" you won't see it and then it will only show on properties that you can set a sticky option.
i'll check on this tomorrow, man, and let you know if i figured it out. thanks for the info.