How to set up a Mega Menu using the Divi Theme's Header (no additional plugins!)
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- If you use the Divi Theme and want to setup a Mega Menu - then this video can show you how without adding plugins or using complicated code.
Elegant Theme's Divi Theme / Divi Builder comes with a lot of obvious features, but the Mega Menu is a little hidden as it's a simple string of text that activates it - meaning you have even more customization control over your WordPress website/blog.
The and short version of this tutorial is to head to your Menus' section (under 'Appearance' and 'Menus' in your WordPress dashboard). Add "mega-menu" as a link class to the WordPress menu item that you want the menu to expand from. If you can't see the Link class, hit 'Screen options' at the top of the screen and turn on 'CSS Classes'.
Find more Divi Tutorials and resources on our Divi Page at CreatorImpact.com - creatorimpact....
If you don't already have Divi, here's where you can find it:
creatorimpact....
(This is an affiliate link I earn a commission from - but supports this channel and the free tutorials I release)
In this video I show you how to activate and customize the Divi Mega Menu, step by step and it's dead easy!
-- ⚒ // TOOLS // ⚒ --
The following are the tools I use and highly recommend. Some of these are affiliate links I earn a commission from, but this is what I use and swear by!
📺 USED FOR MY VIDEOS:
🔴 Camtasia (screen recording): creatorimpact....
📷 Camera - Canon Rebel T7i: amzn.to/3Qzsi28
🎙 Nicama Lavalier Mic: amzn.to/3BR5OW3
🎙 Audio-Technica Mic: amzn.to/3PivRbH
🖥 WEBSITE / WORDPRESS BLOGGING
🌍 WebHosting Siteground:creatorimpact....
🔥 Divi WordPress Theme: creatorimpact....
⚙ All in One SEO Premium Plugin: creatorimpact....
📩 EMAIL NEWSLETTER:
📈ConvertKit: creatorimpact....
😍 MISC:
👁 Adobe Photoshop: creatorimpact....
👁 Canva: creatorimpact....
🔸 FREE TH-cam Thumbnails PSDs: creatorimpact.....
🔥 PREMIUM TH-cam Thumbnails PSDs: creatorimpact.....
🔸 FREE Facebook Cover Images PSDs: creatorimpact.....
🔥 PREMIUM Facebook Cover Images PSDs: creatorimpact.....
FREE PHOTOS:
🔸 Unsplash: unsplash.com/
🔸 Pexels: www.pexels.com/
// LEARN MORE
🔗BEGINNER COURSE
Build a website, set up your presence online and start earning money:
creatorimpact....
// CREATOR IMPACT
🤘 Follow Creator Impact on Social Media!
🔗 Facebook: / creatorimpact
🔗 Instagram: / creatorimpact
🔗 Twitter: / creatorimpact
![[LIVE] : ONE ลุมพินี 82 วันนี้!! คู่เอก | ยอดไอคิว vs อับดัลลาห์](http://i.ytimg.com/vi/hSsyTl_9bqs/mqdefault.jpg)
Was literately struggling all day trying to do this. Thank you so much!
No problem, thank you :)
Thank you man
Sweet! Thanks for the tutorial 👌
No problem, thank you!
Thank you so much from philippines!
No porblem, thank you from Australia!
This is fantastic! thanks for sharing!!
Nice tutorial Wade!
Thank you!
Thanks!
Thanks Brother😍😍😍😍😍😍😍😍😍😍😍
thanks
Your thumbnail Looks better than your menu 😉
Haha, is that a compliment?
Yes 😀
@@motivation4life492 Cheers mate :) I appreciate the playful nature. Thanks for checking out the video!
Thanks- looking for a solution to mobile mega menu
No problem, glad I could help. Thanks for checking out my video!
Nice
Thank you Alessandro!
Hello! Thank you very much for the content, I have a query, I need 3 columns on the desktop version, but I need to disable it on mobile. Do you know how I deactivate the megamenu in the mobile version so that the complete list appears?
Unfortunately, I don't have a simple solution for that. I think it may take some CSS coding to make that a possibility. I'll see what I can figure out for you!
@@WadeMcMaster Thank you!
@@rominaromina3837 I did some tests and it seemed to turn it off for me, so I'm not sure there. I know this was a few weeks ago, are you still having this issue? Feel free to email me a URL to look at to info@creatorimpact.com . I may be able to help but it might take a little time among other things.
But the menu you call it Mega menu is not responsive on mobile.any how to do that?
Just checking - does it convert into a standard drop down / hamburger menu for you? I know it's not a mega menu in mobile but with the space restrictions that would be a good thing. That's what it's supposed to do.
If you know how to make social icons (or any other element) that are in the body of the website kind of zoom up or stick to the menu bar as you scroll down and the sticky menu is activated so those social icons (or what ever element) follows the visitor as s/he scrolls down the website, that would be a tutorial I´d like to see.
That's interesting, I don;t know off the top of my head but I'll take a note and look into it for you :)
can I create a mega menu inside of a mega menu ? I want to create a mega menu to show all categories with images then a sub mega menu to show all subcategories with images. Not sure if this makes sense.
I don't know, have you tried adding the CSS class to some of the other menu items to see what happens? If nothing, I don't know if it'd be possible.
Not working for me
That sucks mate. Its only for the ine main header area, not using the theme builder, so maybe its not working in the area you need it