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!
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?
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?
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!!
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
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.
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
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.
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?
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!
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?
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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-li3gFGjCSIs.html
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 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 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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hSDtlO4OLP8.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 RU-vid 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 💡
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.
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?
