Next chapter: How to style the Divi mobile menu: th-cam.com/video/_LKpZ45k8-I/w-d-xo.htmlsi=PMNNymTLukyc7o6y See the complete course here: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html&si=j9fVsZbGvYrxol4m
Quite simply, the best DIVI tutorials and explanations. Other channels complicate things and it can be very frustrating. Thank you, you have a new subscriber.
You are an amazing teacher. I've been trying to learn Divi better for awhile. You are thorough, engaging and make it really clear. Wish I'd found you last month before I bought a course that was not this good.
Hi teacher. I don't know how to make a header with logo and main menu in one column left, 3 icons in one column right. Can you show me how to do that header, please ?
Thank you for your explanations on this tutorial. I have a problem with the mobile version concerning the section with “linkedIn and the button”. They are positioned one below the other and not on the same line as you show at the beginning of the video. Am I missing something? Thank you
You need to add display:flex; in the top row CSS to display the content in one single row on mobile. I cover this in the next chapter of the course: th-cam.com/video/_LKpZ45k8-I/w-d-xo.html You can find all the course chapters in this playlist: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html
First, make sure that you have updated to the latest version of Divi. If that doesn’t fix the problem, you can try to add this snippet in Divi > Theme Customizer > Additional CSS: header.et-l.et-l--header { z-index: 99999; position: relative; }
This has been a wonderful tutorial. I have an issue, however. The Section immediately beneath my Header lags behind the Sticky effect, i.e. I am left with a large white space between the Header and the Section below in the very moment a scroll motion is triggered with the mouse. The moment the mouse scroll engages, the Header sticks to the top per your tutorial, so everything works in that sense. Padding and Spacing for the Section below the Header are all set to 0. Spent ages on this, can't find a fix! Anyone have any direction I could follow?
Hi! This happens if the sticky header is smaller than the initial header. One quickfix is to add a background color to the entire header by adding this snippet: .et-l.et-l--header { background-color:#1c1c1c; } Change 1c1c1c to the same color as you use in your sticky header. This will remove the white "blinking" effect, even though the small spacing still will be there when scrolling. But it's better. Let me know how it goes!
I have a problem. A white bar appears under the header when scrolling down. It appears only when sticky mode is activated and after reducing header size on sticky mode for compressing effect. How can I solve it?
Hard to tell without inspecting the actual site. Can you share a link? You can also download the header from the video here: divimundo.com/en/divi-layouts/download-a-free-divi-layout/
Make sure that you choose "Left Aligned" under "Content" » "Style" first (yes, that is a bit counter intuitive). Then go to "Menu Text" and you should find "Text Alignment" below the "Menu Text Shadow" options. Let me know how it goes!
Great tutorial thank you but I seem to have a problem reducing the height of the sections - no matter what I try I end up with thick ugly sections that won't reduce beyond a certain point. Can anyone advise please - I have tried reducing padding, sizing, heights - everything but they won't shrink
Hello, Thanks for nicely explained video.. Could you please explain how can we have logo as home icon when we scroll down?? As in current module it does not come..
Thanks Yashpal! First, make sure to add your homepage link in the Menu Module Settings under Content » Link » Logo Link URL. To keep the logo on scroll, just skip the steps after you made the menu sticky (keep the same logo size, row width etc. in the sticky mode). I hope that makes sense!
@@Victor-Duse Thanks for reply.. i could manage to get logo on scroll down by Menu settings - Advanced and then in menu logo i inserted code : content: url(www.travelcurators.in/wp-content/uploads/2021/11/TC-White-logo.png); now problem is that it is linked or clickable to bring back to home page. which css code i can write so that when i scroll down and logo could be clickable. Thanks a ton for your help.
@@roniteau You can't inject links with CSS but you can use jQuery: 1. Go to Divi » Theme Options » Integration » Add code to the body 2. Paste this snippet: $('.et_pb_menu__logo').each(function() { var link = $(this).html(); $(this).contents().wrap(''); }); 3. Save, clear the cache and preview in frontend Let me know how it goes! :-)
Thanks, I'm glad you liked it! Sure, the mobile menu is in the next chapter in the course, see: th-cam.com/video/_LKpZ45k8-I/w-d-xo.htmlsi=wbf83rH86xpkRIek You can find all the chapters (a total of 6 hours) in this playlist: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html&si=JLIj4JIwM3eYO1yx
Hi, when adding custom CSS, do you use code snippet plugins? Won't your changes be erased once there's an update for the theme/Wordpress if applied directly on the parent theme?
Hi Hristiyan! You don’t need a plugin for that. Just add your custom CSS to Divi > Theme Customizer > Additional CSS. It will stick when you update the theme and Wordpress core as well. However, if you would edit the style.css file in the Diivi folder, it would be overwritten when updating the theme/WP.
@@hristiyanzarkov3882 Correct, you don’t need a child theme. A child theme is only needed if you want to edit for example style.css or functions.php via ftp or a file editor.
@@Victor-Duse On your website the template has an inspiration page and case page. What do those represent? Is the inspiration page the blog and the case the category?
@@mrdarryk1 ”Case” and ”Inspiration” are two categories. This video is one of 26 videos in the course (the categories are created in an earlier chapter). You can find all chapters in this playlist: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html and on this page: divimundo.com/en/wordpress-tutorial-for-beginners/ There’s also a long merged video version (6 hours) with timestamp shortcuts in the description here: th-cam.com/video/8LCnT-xrr6M/w-d-xo.html
Next chapter: How to style the Divi mobile menu: th-cam.com/video/_LKpZ45k8-I/w-d-xo.htmlsi=PMNNymTLukyc7o6y
See the complete course here: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html&si=j9fVsZbGvYrxol4m
Quite simply, the best DIVI tutorials and explanations. Other channels complicate things and it can be very frustrating. Thank you, you have a new subscriber.
Thanks Tony, I'm really glad to hear that! 🙂
Mate I gotta relly thank you. You help me with menu settings and much more cause I learned lots of things about Divi. Thank you thank you very much
Cool Andrea, I’m really glad to hear that 🙂
Best divi wordpress website design tutorial. Thanks and keep it up.
Thanks, I really appreciate it!🤜🤛
You are an amazing teacher. I've been trying to learn Divi better for awhile. You are thorough, engaging and make it really clear. Wish I'd found you last month before I bought a course that was not this good.
You are so welcome! :-D
This is awesome Sir, your channel is crystal clear explained divi things 👍 many thanks
Thanks for your kind words Natalius! 🙂 More good stuff is coming soon
Hi teacher. I don't know how to make a header with logo and main menu in one column left, 3 icons in one column right. Can you show me how to do that header, please ?
Thank you very much.. it really helps me
Awesome, I’m glad to hear that 😊
Thank you for your explanations on this tutorial. I have a problem with the mobile version concerning the section with “linkedIn and the button”. They are positioned one below the other and not on the same line as you show at the beginning of the video. Am I missing something? Thank you
You need to add display:flex; in the top row CSS to display the content in one single row on mobile. I cover this in the next chapter of the course: th-cam.com/video/_LKpZ45k8-I/w-d-xo.html
You can find all the course chapters in this playlist: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html
@@Victor-Duse Thanks a lot
great course ! thank you
@@lucmaradan4370 You’re very welcome ☺️
A quick question: what do I do when the drop down menus are hidden behind the header image?
First, make sure that you have updated to the latest version of Divi. If that doesn’t fix the problem, you can try to add this snippet in Divi > Theme Customizer > Additional CSS:
header.et-l.et-l--header {
z-index: 99999;
position: relative;
}
This has been a wonderful tutorial. I have an issue, however. The Section immediately beneath my Header lags behind the Sticky effect, i.e. I am left with a large white space between the Header and the Section below in the very moment a scroll motion is triggered with the mouse. The moment the mouse scroll engages, the Header sticks to the top per your tutorial, so everything works in that sense. Padding and Spacing for the Section below the Header are all set to 0. Spent ages on this, can't find a fix! Anyone have any direction I could follow?
Hi! This happens if the sticky header is smaller than the initial header. One quickfix is to add a background color to the entire header by adding this snippet:
.et-l.et-l--header {
background-color:#1c1c1c;
}
Change 1c1c1c to the same color as you use in your sticky header. This will remove the white "blinking" effect, even though the small spacing still will be there when scrolling. But it's better.
Let me know how it goes!
very nice. thanks for posting
You’re very welcome!
My header is not fix on the to how to fix that please reply
Just follow the steps in the video to make the header fixed.
@@Victor-Duse thanks ❤️
I have a problem. A white bar appears under the header when scrolling down. It appears only when sticky mode is activated and after reducing header size on sticky mode for compressing effect. How can I solve it?
Hard to tell without inspecting the actual site. Can you share a link? You can also download the header from the video here: divimundo.com/en/divi-layouts/download-a-free-divi-layout/
My Designs Tab doesn't have the text align option :(
Make sure that you choose "Left Aligned" under "Content" » "Style" first (yes, that is a bit counter intuitive). Then go to "Menu Text" and you should find "Text Alignment" below the "Menu Text Shadow" options. Let me know how it goes!
Great tutorial thank you but I seem to have a problem reducing the height of the sections - no matter what I try I end up with thick ugly sections that won't reduce beyond a certain point. Can anyone advise please - I have tried reducing padding, sizing, heights - everything but they won't shrink
Thanks! It's hard to tell on a general level. Can you share a link?
Hello,
Thanks for nicely explained video.. Could you please explain how can we have logo as home icon when we scroll down?? As in current module it does not come..
Thanks Yashpal! First, make sure to add your homepage link in the Menu Module Settings under Content » Link » Logo Link URL. To keep the logo on scroll, just skip the steps after you made the menu sticky (keep the same logo size, row width etc. in the sticky mode). I hope that makes sense!
@@Victor-Duse Thanks for reply.. i could manage to get logo on scroll down by Menu settings - Advanced and then in menu logo i inserted code :
content: url(www.travelcurators.in/wp-content/uploads/2021/11/TC-White-logo.png);
now problem is that it is linked or clickable to bring back to home page. which css code i can write so that when i scroll down and logo could be clickable.
Thanks a ton for your help.
@@roniteau You can't inject links with CSS but you can use jQuery:
1. Go to Divi » Theme Options » Integration » Add code to the body
2. Paste this snippet:
$('.et_pb_menu__logo').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
3. Save, clear the cache and preview in frontend
Let me know how it goes! :-)
This is awesome.
Would this Menu work in mobile and tablet??
Thanks, I'm glad you liked it! Sure, the mobile menu is in the next chapter in the course, see: th-cam.com/video/_LKpZ45k8-I/w-d-xo.htmlsi=wbf83rH86xpkRIek
You can find all the chapters (a total of 6 hours) in this playlist: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html&si=JLIj4JIwM3eYO1yx
Thank you - I'll check the Mobile Menu video.
Hi, what is the size of your logo?
Hi! It's 100 x 60 pixels.You can preview it live at divicrib.com
Thank you!!!!
Hi, when adding custom CSS, do you use code snippet plugins? Won't your changes be erased once there's an update for the theme/Wordpress if applied directly on the parent theme?
Hi Hristiyan! You don’t need a plugin for that. Just add your custom CSS to Divi > Theme Customizer > Additional CSS. It will stick when you update the theme and Wordpress core as well.
However, if you would edit the style.css file in the Diivi folder, it would be overwritten when updating the theme/WP.
@@Victor-Duse I see, so I won’t be required to use a child theme in this case, I can directly modify the main theme, correct?
@@hristiyanzarkov3882 Correct, you don’t need a child theme. A child theme is only needed if you want to edit for example style.css or functions.php via ftp or a file editor.
@@Victor-Duse Thanks a ton for the valuable info, it is highly appreciated!
thank you so much!
I’m glad you liked it! 🙂
nice tutorial but it would have been nice to also size it for tablet and mobile///
That’s the next chapter in the course: th-cam.com/video/_LKpZ45k8-I/w-d-xo.html
@@Victor-Duse On your website the template has an inspiration page and case page. What do those represent? Is the inspiration page the blog and the case the category?
@@mrdarryk1 ”Case” and ”Inspiration” are two categories. This video is one of 26 videos in the course (the categories are created in an earlier chapter).
You can find all chapters in this playlist: th-cam.com/play/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH.html and on this page: divimundo.com/en/wordpress-tutorial-for-beginners/
There’s also a long merged video version (6 hours) with timestamp shortcuts in the description here: th-cam.com/video/8LCnT-xrr6M/w-d-xo.html
audio is very low
Not really