How to Create a Custom Dropdown Menu with Kadence (Create a dropdown menu as seen on kadencewp.com!)
Вставка
- Опубліковано 24 лип 2024
- In this video, you will learn how to create a custom dropdown menu just like the one you find on the Kadence WP website at Kadencewp.com! This in-depth tutorial will cover how to use Kadence Blocks, Hooked Elements and the Ultimate Menu feature in Kadence to create an elegant dropdown menu. You will need the Kadence Pro add-on to utilize Hooked Elements and the Ultimate Menu feature.
Timestamps and resources are below!
Enjoy!
Timestamps:
0:00 Intro: How to Create a custom Dropdown like the Kadence website’s
00:48 Overview of custom dropdown
01:50 How to install Kadence Theme, Kadence Blocks Pro and Kadence Theme Pro-add
07:33 How to install a Kadence Starter Template
10:05 How to create a custom dropdown with a Kadence Element
20:14 How to add the custom dropdown to the main menu (Kadence Mega Menu Feature)
24:41 How to style the custom dropdown like the dropdown at KadenceWP.com
40:42 How to make the custom dropdown mobile responsive
44:13 Thank you and conclusion
🙏SUPPORT & THANK YOUS?
✅ Buy me a Coffee - www.buymeacoffee.com/cliftonw...
✅ Leave a Super Thanks in UA-cam Comments
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Kadence Shopkit - cliftonwp.com/kadence
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadence #megamenu #kadencepro #kadencetutorials
@CliftonWP Awesome! Great Job!
#KadenceWP! StellarWP!
Can’t wait to see more!
Cheers, kai!
Thank you Kai! I appreciate you!
Yieepee!!! He's here. Something powerful again. Needed it so badly. Your tutorials are very great. You make it so simple and easy to follow. Thanks again
Thank you Charlie! You are the best!
This is EXACTLY what I needed! I'm so happy to have found your awesome tutorial! Thank you SO much!
You are so very welcome! Thank you for watching!
I asked for it in the Kadence Power User Days and you did it 😬👍🏼
Fantastic! I am working on a few other videos, so if you have something you would like to see about Kadence made into a video, feel free to add it here and I will add it to the queue!
Same, also asked for it! I know Ben did a tutorial, which was great, but Clifton really takes it to the next level when it comes to details.
Thank you for the tutorial! Very well explained.
I can't thank you enough Clifton. Please keep doing the good work.
Clifton, thank you for such an amazing tutorial. It's not just that the way you deliver the step by step information doesn't assume knowledge, it's also that you come across as being smiley and genuinely helpful. An absolute pleasure to listen to and crib from.
Thank you so much! I appreciate your kind words and I appreciate you watching!
Easy and fast. Thank you.🎉
Thank you Ruth! I appreciate you watching!
Oh, by the way, this is without a doubt the best tutorial of any kind I have watched on YT in years.
Love your tutorials
Thank you so much!!!
Great tutorial as usual
Thank you very much!
Great video Clifton: the mega menu tutorial you gave really allows you to put a lot of content of your choosing above the fold!
Thank you Peter! I appreciate you!
30 minutes in and I've learned so much about custom menus in Kadence. Thanks Clifton!
Happy to help! Thank you so much for watching! I appreciate you!
Great video thanks Clifton
Thank you Dan! I appreciate you watching!
Clifton, THANK YOU! Amazing tutorial. Just what I needed plus I learned a few extra tips (as usual!)
You are so very welcome Jenn! I appreciate you watching and happy you found the video is helpful!
Hi Clifton, Once again another excellent video, which came just in time for an idea I am doing for a client, Thank you so much. I look forward to your next video. All the very best for now, John
Thank you John!
love these long videos focusing on something specific and useful
Thank you Jeff! Glad you like them!
Thank you Clifton for once again showing how powerful the cadence element feature is for replacing pretty much any piece of content across the website with some thing templitized
You are very welcome! Thank you!
You really put out good content
Thank you so much! I appreciate you and I appreciate you watching!
… You're simply the best
Thank you so much! I appreciate you!
Sir, I learned a lot from your tutorial, and thanks to you, I've decided to stick with Kadence and work on it.
Thank you so much Mohsin! Happy to hear that you are sticking with Kadence! You will be glad you did!
@@CliftonWPfollowing your tutorial for building up my website with kadence free theme from scratch, so can we make a sub categories and then sub sub categories and so on using kadence free? How to do so? Please share a link of the tutorial for the same 🙏
awww i like your smiles is soo infectious
Thanks!
Thank you so much! Very much appreciated!
Hey there, Clifton- It's been a while since I watched one of your videos. Great work and a fun video indeed. Last we chatted, you had just passed 1000 subs. Now more than three times that. Congratulations! You deserve it.
Thank you David! Great to hear from you and hope all is well with you!
Teşekkürler. Tekrar izledim, çok faydalı. İstanbul Türkiye'den selamlar
Teşekkürler!
Teşekkürler.
Hi Clifton, Fantastic video. I was wondering if you can apply a custom dropdown menu to a button. I've searched and searched and can't figure it out. Maybe an idea for your next video?!? Thanks again for all your help!
Great video! On q - why is the custom width of the menu 375px - what does this correspond to?
Excellent video, as always. However, I can't seem to accomplish my goal. I was hoping to create a menu item (Topics) with a submenu of unique blog tags sorted alphabetically. Is that possible?
It looks so good! But 700$ is far above my budget when all I need is just one fancy menu, and I run a miniature business.
Is it possible to make a mega Menu that links to WooCommerce Product Category Archive Pages ??
Hi, Clifton!
Thanks for the video.
Is it possible to put a logo, phone, mail, buttons, etc. in the mobile menu?
You are welcome Alleksandr! Yes adding a logo, phone, etc, is very possible in the mobile menu.
Hi Clifton, thanks for another very informative tutorial. I've watched it a few times. How do you link the individual items in the custom dropdown menu to their corresponding pages? For example, If you click on FAQs in the dropdown, that page will come up? Thanks
Thank you Stephen. Depending on what you create your links with you can link it to the page it needs to go to. In this tutorial we used the info box block from Kadence to create the menu dropdown menu items. The info box has a built in link field in the General settings of the block where. you can add or search the url of the page you wish to link to
Thank you, Clifton. I was able to link the dropdown items with the corresponding page from your instruction.
@@stephenpleasant5653 Awesome!
Lovely and great explanation! However, I was looking for e-mails arriving in my inbox which were never arriving. Than I realised it was your video! 😂
Thank you so much!
Great video! I think you skipped the part where you adjust the width of the grey border somewhere between 24:30 - 24:50
Thank you! That part is right here: 30:40. The padding of the container creates the reduced border width.
How can I change the length of my home page. One of my drop down navigation bars listing the articles (pages) goes lower than what the screen shows. On the article page, it isn't affected because the page scrolls, but on the home page, the drop down sticks at the bottom of the page. I have Kadence Pro. Thanks. However the problem is still happening on the kitchens menu. I won't change it till you look at it.
Thank you so much! Anyway I can see the home page?
nice work Clifton! Do you hide this menu in mobile?
Thank you Michael! I don't hide the menu on mobile. Towards the last 6 minutes of the video, I show how to style the menu for mobile. :-)
I'm not sure how to use a search widget in the main menu because when I try to put it in the main menu, see the preview, and click on the search icon, it opens in a large page rather than a search like Google, UA-cam, or another search box. Please make a video about it and how to fix it; I hope you understand my point.
I have followed all of these steps but I do not see the option for the drop down to select the custom drop down. Any ideas?
Dear, It was amazing. But i am stuck on the point how we connect menu option with posts or pages
Thank you for watching! If you are using the info boxes for your menu items, in the info box settings there is a link option. Search for your post or page in the link field and select it from the options that appear. I hope that helps. 🙂
@@CliftonWP Bundle of thanks dear, i have got it. 👍👍👍👍👍
Does anyone know why I don't see the 'Mega settings' in custom dropdown menu item settings? I did everything step by step and I only see the Label setting there. :(
Hi Wiktoria! Hope all is well with you. Do you have a screenshot I can look at?
Clifton, you really keep delivering the best tutorials for Kadence users! This is exactly what I was looking for. You explain it very well and it's really easy to follow. Thanks again!
One thing I wanted to ask: how do you put a subtle shadow effect behind the mega dropdown menu? It makes the menu stand out a bit more from the hero sections/content.
Thank you Markus!!! I appreciate you friend! The submenu/dropdown menu has a very r subtle drop-shadow by default, however if you want more of a pronounced drop-shadow you can add it within the Section options that houses the menu items. The same section where you have applied the border radius. I hope that helps and thank you again!
@@CliftonWP Ah I didn't notice that, thanks a lot! I will check it out. Thanks!
@@CliftonWP Also, one more thing I wonder: Is there an option that when you hover a menu item (a link with an arrow behind it, to expand the menu), that it opens another menu to the left or right of it, with more links?
I watched your video and succeeded in creating a really nice Custom Dropdown Menu with Kadence. I am using Elementor and it works wonderfully! Thank You. But, as soon as I loaded Elementor Pro (to gain some additionally functionality with widgets), the menu went dead! If I uninstall Elementor Pro, it works again using just Elementor. But with Elementor Pro, it doesn't! I contacted Elementor (because I have their Premium Support)...and they absolutely refused to even investigate, saying it was Kadence's fault and I should contact Kadence. Here is my question: Are you aware of any conflicts with Elementor Pro and the Custom Drop Down Menu using Kadence Elements. Hopefully, someone has a workaround so I don't have to abandon Elementor Pro (which I am willing to do based on their refusal to investigate!) and use another builder.
Thank you Gerald! Sorry you encountered this issue. I am not aware of this specific issue, however it sounds like there may be a conflict somewhere. If you are able to replicate the functionality using Kadence and Kadence Blocks, I would recommend it. Wish I could be more helpful!
Hi Clifton, please release your codes or coupons for Black Friday & Cyber Monday for us to buy some products through you for you to get something for the wonderful work you are doing and more coffee for you as we plan our purchases for the period..
Charlie you are the greatest! Will do and thank you for your support!
@@CliftonWP Thanks. Looking forward to that. You've made us fall so deeply in love with Kadence.
I'm starting to feel like the guy in class who asked too many questions. Whenever possible please do a tutorial on customizing the Cart and Checkout pages with Shop Kit..