6.2 Create a sticky header menu in the Divi Theme Builder
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- * Create a stunning menu with a top bar and navigation in the Divi Theme Builder.
* Create a sticky menu that sticks to the top as you scroll down the page.
* Create a top bar with buttons for social media icons and a call to action button
First, create your menu and choose your links at Appearance » Menus in WordPress.
This video is a part of a complete WordPress tutorial with more than 6 hours of video material - completely free. Find the full tutorial at: divimundo.com/...
All links, files and code snippets mentioned in the chapter is available below. 👇
🔗 AFFILIATE LINKS WITH EXCLUSIVE DISCOUNTS
➡️ 20% off Divi: divimundo.com/...
➡️ 69-76% off web hosting: divimundo.com/...
➡️ Divi Supreme: divimundo.com/...
➡️ Divi Toolbox: divimundo.com/...
➡️ Divi Blog Extras: divimundo.com/...
➡️ Divi Form DB: divimundo.com/...
This video is not sponsored but it contains affiliate links to SiteGround and Elegant Themes. If you make a purchase via these links, I’ll receive a commission. But it will NEVER cost more for you. Your support makes it possible for me to create more free content. Thank you! 🙌
🔗 DOWNLOAD FREE LAYOUTS & OTHER RESOURCES
➡️ All images, icons, code snippets and layouts used in this tutorial are available for free at: divimundo.com/...
➡️ Visit the live demo website that we create in this tutorial: divicrib.com
➡️ Free download of all layouts that I created for this tutorial: divimundo.com/...
➡️ Premium Divi plugins mentioned in this video: divimundo.com/...
➡️ Six tips for a better Divi mobile menu: divimundo.com/...
⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and Divi. The vision is that everyone should be able to design beautiful websites without exhausting coding issues.
⚡ DiviMundo.com is produced by Duse Media, a WordPress agency in Malmö, Sweden. Read more at dusemedia.se (In Swedish)
⚡ DiviMundo was founded in 2017 by Victor Duse, the tutor in this video.
Find more tutorials and more free WordPress web design resources at divimundo.com/en/
Affiliate disclaimer
We are dedicated to sharing knowledge about WordPress and Divi. Some of the links in this video are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission, but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. DivMundo is not affiliated with nor endorsed by Elegant Themes, SiteGround or any other brand mentioned in this video.
![[TH] 2024 PMSL SEA Finals D1 | Fall | ยิงต้องโหด ให้เหมือนโกรธกันมาก่อน](http://i.ytimg.com/vi/OnTdfGySmds/mqdefault.jpg)
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! 🙂
great course ! thank you
@@lucmaradan4370 You’re very welcome ☺️
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
Best divi wordpress website design tutorial. Thanks and keep it up.
Thanks, I really appreciate it!🤜🤛
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 🙂
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
Thank you very much.. it really helps me
Awesome, I’m glad to hear that 😊
very nice. thanks for posting
You’re very welcome!
thank you so much!
I’m glad you liked it! 🙂
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.
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;
}
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?
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/
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!
@@DiviMundo 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! :-)
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
@@DiviMundo 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
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!
Hi, what is the size of your logo?
Hi! It's 100 x 60 pixels.You can preview it live at divicrib.com
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.
@@DiviMundo thanks ❤️
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.
@@DiviMundo 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.
@@DiviMundo Thanks a ton for the valuable info, it is highly appreciated!
audio is very low
Not really