Creating Full Width Dropdown Menus with Icons in Divi

[@brutalpancho]

dude!~ I had no idea divi had the mega-menu css activation. You just saved me a migraine :) Thanks!

[@uhmazingfinds1328]

Great tutorial! Easy to follow and in the length of this video I have mine up and running! Thanks!

[@DiviLife]

That's great to hear! Thanks for letting us know :)

[@vixr8913]

Fantastic tutorial! Simply explained and really improved my site. Thanks

[@DiviLife]

You’re welcome! Glad to hear it was helpful 😊

[@AndyCarr]

Very good tutorial... I know it's certainly going to add extra freedom to my designs now... thank you!

[@filmfreaken]

Thank you so much Tim, this was a great learning experience for me, im new to DIVI, and the dropdown on my project was bugging me alot because yeah, its a dead giveaway! love this! thank you so much!

[@DiviLife]

That's awesome! I'm glad to hear this was helpful :)

[@valentinheinly]

Excellent tutorial ! Thank you a lot, it was very clear !

[@steve02a]

Great video - thanks for making this tutorial. I believe in WP 4.7.x, you don't need the quotes when using the tag. Wordpress inserts them for you. Based on your blog posting, if someone copies/pastes from step too (since you include the quotes), you'll have double quotes when you view the source of the page. Removing the quotes and let WP add them, works great! You have an awesome blog! Read it all the time and I subscribe too.

[@DiviLife]

That's great to know, thanks for sharing!

[@dansopinion3219]

Thank you, I was having issues having the images/icons not appear

[@Wilylinton]

steve02a i

[@winkipinky]

Fantastic tutorial! Thank you for making this video and css available.

[@Gaatech]

great video. very clear. love the delay css

[@DiviLife]

Great! :)

[@Apalache]

Great stuff Brother! You're a natural teacher too. Keep up the good work and thanks again!

[@DiviLife]

Thanks so much for the vote of confidence! I appreciate the kind words. Keep a look out for more tutorials! :)

[@boricua21ny]

Excellent video. Thanks for sharing.

[@DiviLife]

Jerry Diligiro glad you found it useful! :)

[@snookipinnu7925]

Your voice is so nice and clear

[@DiviLife]

Thanks!

[@burneychoo]

Great stuff. You deserve more subscribers!

[@paulspanings8061]

Thanks a lot Tim! It is a great tutorial. And it works for me..

[@ElvinRivera]

Really great tut, thanks a lot for the resources.

[@DiviLife]

You're welcome, Elvin! I'm glad you found this tutorial helpful :)

[@youmilkpack]

Thanks soo much! My site looks awesome now! :) happy!

[@aniketjoshi7518]

Liked it . Is it responsive?

[@TeguhPrayogo]

hi Tim. i use your tutorial how to create fixed-menu on divi. that's great. and now i try to add mega menu on that. the problem is, when i use mobile phone, the mega menu i created covering all the phone screen and it's fixed too. so, i cannot see the whole menu list with the phone, and i cannot see the screen when i scroll up and down while the mega menu showed. how to fix that? just adding another menu builder? toggle it? creating burger menu that only visible on the phone? or something else? thank you in advance.

[@claudiaballhaus2719]

That is really a great tutorial. But I have a problem. Instead of the icons I've choosen (my own icons) I only can see the placeholders for them in the menu. I copied the right URL. Is there perhaps a size limit? My graphics have an original image size of 100x23px.

[@uriasonline]

Thank you for this wonderful tutorial! I have a question: can you use this in combination with the plugin "Sticky Menu (or Anything)" ... or maybe another sticky menu plugin? Hope to hear from you! Greetings Urias

[@DiviLife]

Thanks for the kind words. I'm glad you enjoyed the tutorial. What would be the reason for the sticky plugin? Divi's menu (and dropdown menu, is sticky (fixed) by default. So I'm not sure I understand what the purpose would be.

[@uriasonline]

i am totally new to wordpress and divi. so i am just exploring it by myself. if you check my website maybe it becomes clear: www.chillout-massages.nl with this plugin i moved the menu to another place. so now i was wondering if you can use this dropdown menu in my situation. and do you know how i can add a logo in my menu. They way i created my menu, is this also possible in divi? without using the plugin i used? Thanx again! Urias

[@andrewgillie5298]

Great video, the only problem I have is the drop down doesn't go vertical it goes horizontal how do I fix that?

[@YourGameGalaxy]

Hi, do you also know how to change only the letter color of the dropdown box?

[@xiamaru688]

Best Divi 3.0 video I have seen to date! Keep up the good work! Nothing beats good old fashioned English..lol I do have one question, and don't laugh. At around 4:35 in the video you talk about setting up the "mega menu" and to do that I need to tic the "CSS class" checkbox in "screen options". My problem is when I go to "screen options" I don't have the option to select "CSS class. I don't see the "Show advanced menu properties" menu. Can you tell how to pull it up? Thx in advance.

[@DiviLife]

Thank you very much for the encouraging feedback! :) That's very weird you don't have those options in screen options. Are you an admin on the site?

[@xiamaru688]

Tim, at first I thought that I may have disabled something, playing around in the Divi or WP settings, Im no expert, however I can't see anything that seems to be out of place. Then I thought maybe it has something to do with using my development environment?( localhost- xampp - win7)

[@Gogloglo]

I'm tinkering with some new things using xampp and I do see the option. I'm using Divi version 3.0.19.

[@constantin2913]

All good , but the icon's don't show , help pls ? Link photo is good , full width as well...

[@ceceliagreenebarr4730]

Thanks for the tutorial. Although I copied the code exactly, I'm having difficulty with centering the menu and seeing the icons. Instead of an image I get the ? for each image. I even tried using different files but the image doesn't appear and the menu bar is not centered.

[@sayantan9409]

I want to make 2 navbar with divi. and when user scroll page, I want to merge both header (in my terms)... How to do that with divi? Please reply asap

[@abigroman]

*******I'm having serious problems with the images not scrolling on mobile. They are locked and all the menus menu items I'm locked out of. ????? Please Advise?

[@nobleminstrel]

I have more than 3 CUSTOM LINKS. But in Divi's default it makes the Dropdown Menu to 4 x 3 How can i make it in CSS Code to 3 x 4? Thank you.

[@nu-box]

Is it also possible to adjust the normal vertical drop down menu so that it adapts to the length of the text?

[@notbarbara2647]

Het man! Awsome tutorial, I was wondering what I would have to change in order to get the text right ABOVE the icons... Would you (or anyone else) be able to help out with this?

[@luigirausch4913]

Hello! I had a question. I noticed that when you center the menu in the header then the secondary drop down menu is no longer full-width. This works on the default aligned left setting, but not for the centered settings. Would you have a fix for this? Thanks!

[@marisalepore6730]

Hi Tim! I guess I'm late to finding this video, but I had a question about making the mega-menu full width. I added all of your code and enabled full-width in the customizer, but my dropdown bar still isn't expanding to the width of the page. Any idea what might be going wrong?

[@jestertitus7466]

Thank you sooo much for this tutorial , can we make full height and have images on the background

[@DiviLife]

It would require a lot of custom CSS to achieve that with the default mega menu. However, we have a premium plugin that makes creating mega menus extremely easy! divilife.com/downloads/divi-mega-pro/

[@jestertitus7466]

@@DiviLife I recently purchase the divi mega pro Purchase/Payment ID: 926204 however the key is not working let me know how to fix this or should i get and other key your responds is much appreciated

[@tobuo]

easy to understand as well for not native english speaker

[@ferhatonal]

hi, thanks, its help a lot, i also want to give hover color to icon. how i can do that?

[@fredericsurinpsychologue]

Hello, Not working for me. Each time I save the new menu, it does'nt catch the code img src and the following url. What can I do ? Thank u

[@bharatk6790]

can u pls make an video showing creation of an good affiliate site.People are constantly searching on KZbin "How to make an affiliate site" but all they get is an eCommerce site creation video.If you create a some videos on creation of Affiliate site your channel might grow at rapid rate since no one targeting this affiliate video creation

[@LawnCrack]

Thank you!

[@YourGameGalaxy]

Hi Tim, thank you so much for these tutorials! I learn a lot from it, but i've got a problem that you maybe can solve. I want to use a different background color for my slide down box. For example i want my main menu bar to be a dark gray and want to make my slide down box a white color with a box-shadow added. Because i really like the way your slide down box looks with the white background and a dark shadow over it. And i experienced that a dark slide down with a white box-shadow looks not that great for me. I really hope you can help me out with this! And again, really thanks for these tutorials. I subscribed to it, because they are just really usefull so keep the good work going! Regards!

[@DiviLife]

Hi Tim! I'm glad to hear you liked the tutorial! :) - Yes you can change the background color of the dropdown menu by adding this custom CSS to the Divi Theme Options custom CSS box: .et_fullwidth_nav #top-menu li.mega-menu > ul { background-color: red; } You can of course change red to whichever color you choose :) Hope that helps!

[@YourGameGalaxy]

Thank you very much! Is there also a costom css code to change the color and font type of the letters in only the dropdown box? I've tried some regular html/css codes but i didn't got it to work. Do you know these costom css codes?

[@loidinh7104]

how come when I have 2 items in the dropdown menu, they are displayed vertically instead of horizontally?

[@digwillhachi]

great video thanks!! I have to use wordpress for some sites as that is what the client needs. However adobe muse is so much easier. This could be made in 5 min with no code in Muse.

[@DiviLife]

Hey there, yes Muse can definitely be easier for certain things. However, the quality of the code output with Muse is less than desirable (at least last time I looked at it).

[@WirKramers]

Thanks nice Video

[@helenario6678]

IVE ENTERED THE CSS CODE IN DIVI THEME BUT THE SIDE BAR STILL SHOWS UP!!! IVE ADJUSTED FOR A FULLPAGE...STILL SIDE BAR SHOW SUP. ANY SUGGESTIONS??

[@malikblackcobra5347]

Hu9l

[@WillOfTheWeb]

Thanks for this!!

[@hotliveph9119]

New to this... so I don't understand where the other tabs came from. It was already there when the video started.

[@LoedMerlin]

Tim, you show 3 sub menu items. Is Divi three by default? I am wondering what happens if I have, let's say, 6 items in the drop down?

[@DiviLife]

Hi Michael, yes I used three in the tutorial, not for any particular reason. You could definitely use more. You may need to adjust the spacing, font-size, etc. though if they break into two lines on smaller screen widths. The mobile menu starts at 980px wide, so you just need to make sure that at 981px and larger the menu doesn't break into two lines.

[@tcarter8942]

Thank you for the tutorial. It is a big difference to how my website looks. I wanted to touch on this comment. I have six items in a drop down but they are not lined up. There are five items on the top line and one on the second. Is there a code to help me line the tabs up or set a particular number on top and bottom row? Thank you in advance for your assistance!!!

[@steveh9073]

How do you make the blue locations button in the header?

[@tomclark2602]

Loved the tutorial, but the icons and links dont centre in the navigation. Followed it to the letter :( It makes them smaller, but not in a line.

[@DiviLife]

Hi there, Tom. Sorry to hear the icons aren't centering for you. Do you have a link you can share? If you don't want to post publicly, you can contact me at DiviLife.com and I'd be more than happy to take a look! :)

[@sarhanrashid]

Great tutorial. Really useful. I've got a development site setup on my local machine and ran into an odd issue. When I entered the URL for the icons, they failed to appear in the menu. However, when I removed the parenthesis and entered it (e.g. it worked. Anyone else faced this issue? Could someone clue me in as to why this happens?

[@illegalehumor]

I love you man! saved me a headache. You did what the up loader failed to do!

[@djduchi]

thanks man

[@DiviLife]

You're welcome! :)

[@arkianderson8738]

How would I position the navigation label underneath the icon instead of beside it? is this possible?

[@arkianderson8738]

P.s you have saved me so much time and money! Youre an amazing teacher!

[@doktorrollo-koster4276]

Great work buddy, but LOL u seem tensed. The people u are teaching will be more tensed if the teacher himself shows the signs! but i adore ua work

[@jeremygordon6275]

Doktor Rollo-Koster

[@guatenews502]

Friend, to put in a row more than 3 images, I appreciate your help

[@kostantinoskalominidis2885]

nice video sir

[@DiviLife]

Thank you! Please feel free to share it, and let me know if you have any tutorial requests :)

[@fashiondesignauthority-wym4069]

شكرا

[@NeilNileStudios]

8:58 I need to remember this time for I replace the icons that was given later.

[@laserall]

THIS WON'T WORK WITH DIVI THEME BUILDER UNFORTUNATELY.

[@rudolfstomps6912]

I did it all but Icons are not showing

[@DiviLife]

Make sure the URLs are correct. Copy them again from your media library and try it again :)

[@alevelezzYouTube]

WP 4.7.x, you don't need the quotes when using the tag.

[@glasgowtranslate2561]

Thanks for the help

[@johnsontube4611]

In mobile devices, the drop down is automatically loaded/opened without even hovering the mouse over it or clicking it, look here prntscr.com/efzsdt Please help me fix it Thank you

[@az.design1520]

Hey, fab tutorial and brilliant mod on the navbar. MIne works perfectly on safari and firefox but doesn't seem to work in the chrome browser? It doesn't go full width and the icons don't resize. Do you know why this could be? Any code fixes? I guess I could just make the icons the right size so they don't need resizing, but the full width and delay would be great to have a fix on. :) dev.cantellotayler.com/

[@az.design1520]

It does work!! I'm sorry - all perfect - must have been my browser caching :)

[@MuhsinAlam]

Tell less Do more...

[@strmishas]

rubish & useless

[@DiviLife]

In what way? There's a lot of other comments that say it works great. If you have a question or a problem we can try and help.