How to Create a Custom Dropdown Menu with Kadence (Create a dropdown menu as seen on kadencewp.com!)

Поділитися
Вставка
  • Опубліковано 17 лис 2024

КОМЕНТАРІ • 87

  • @adrianw604
    @adrianw604 Рік тому

    30 minutes in and I've learned so much about custom menus in Kadence. Thanks Clifton!

    • @CliftonWP
      @CliftonWP  Рік тому +1

      Happy to help! Thank you so much for watching! I appreciate you!

  • @fakegray
    @fakegray 2 роки тому

    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

    • @CliftonWP
      @CliftonWP  2 роки тому

      You are very welcome! Thank you!

  • @charliegerson7570
    @charliegerson7570 2 роки тому +1

    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

    • @CliftonWP
      @CliftonWP  2 роки тому

      Thank you Charlie! You are the best!

  • @fixngrow
    @fixngrow 11 місяців тому

    Oh, by the way, this is without a doubt the best tutorial of any kind I have watched on YT in years.

  • @faydhdesigns
    @faydhdesigns Рік тому +1

    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.

    • @CliftonWP
      @CliftonWP  Рік тому

      Thank you so much! I appreciate your kind words and I appreciate you watching!

  • @MdAkashTube369
    @MdAkashTube369 Рік тому +1

    I can't thank you enough Clifton. Please keep doing the good work.

  • @jeffbarnhart6441
    @jeffbarnhart6441 Рік тому

    love these long videos focusing on something specific and useful

    • @CliftonWP
      @CliftonWP  Рік тому

      Thank you Jeff! Glad you like them!

  • @Mgramato1
    @Mgramato1 Рік тому +2

    This is EXACTLY what I needed! I'm so happy to have found your awesome tutorial! Thank you SO much!

    • @CliftonWP
      @CliftonWP  Рік тому +1

      You are so very welcome! Thank you for watching!

  • @KaiBuskirk
    @KaiBuskirk 2 роки тому +1

    @CliftonWP Awesome! Great Job!
    #KadenceWP! StellarWP!
    Can’t wait to see more!
    Cheers, kai!

    • @CliftonWP
      @CliftonWP  2 роки тому

      Thank you Kai! I appreciate you!

  • @jennscharfconsulting
    @jennscharfconsulting Рік тому +1

    Clifton, THANK YOU! Amazing tutorial. Just what I needed plus I learned a few extra tips (as usual!)

    • @CliftonWP
      @CliftonWP  Рік тому

      You are so very welcome Jenn! I appreciate you watching and happy you found the video is helpful!

  • @Kh4N
    @Kh4N 2 роки тому +1

    I asked for it in the Kadence Power User Days and you did it 😬👍🏼

    • @CliftonWP
      @CliftonWP  2 роки тому +2

      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!

    • @markuserikssen
      @markuserikssen 2 роки тому +1

      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.

  • @rhinotecbekasi5530
    @rhinotecbekasi5530 5 місяців тому

    Thank you for the tutorial! Very well explained.

  • @mohsinshahzad8969
    @mohsinshahzad8969 2 роки тому +1

    Sir, I learned a lot from your tutorial, and thanks to you, I've decided to stick with Kadence and work on it.

    • @CliftonWP
      @CliftonWP  2 роки тому

      Thank you so much Mohsin! Happy to hear that you are sticking with Kadence! You will be glad you did!

    • @drishtys
      @drishtys Рік тому

      @@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 🙏

  • @peterwilliams5522
    @peterwilliams5522 2 роки тому

    Great video Clifton: the mega menu tutorial you gave really allows you to put a lot of content of your choosing above the fold!

    • @CliftonWP
      @CliftonWP  2 роки тому

      Thank you Peter! I appreciate you!

  • @TLCOnlineChannel
    @TLCOnlineChannel 2 роки тому

    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

  • @LeventZeytinci
    @LeventZeytinci Рік тому

    Teşekkürler. Tekrar izledim, çok faydalı. İstanbul Türkiye'den selamlar

  • @saraphinedonkor5857
    @saraphinedonkor5857 8 місяців тому

    awww i like your smiles is soo infectious

  • @PilatesinSacramento
    @PilatesinSacramento Рік тому

    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.

    • @CliftonWP
      @CliftonWP  Рік тому

      Thank you David! Great to hear from you and hope all is well with you!

  • @ruthrojasp
    @ruthrojasp 2 роки тому

    Easy and fast. Thank you.🎉

    • @CliftonWP
      @CliftonWP  2 роки тому

      Thank you Ruth! I appreciate you watching!

  • @BobbyKelsey
    @BobbyKelsey 2 місяці тому

    Clifton buddy you almost touched on a topic I’ve been trying to figure out 😂
    At around 17:40 I was hoping you’d explain how to resize the hero image for the mobile view. How can I pull that off so it’s not a hyper zoomed in hero image from the desktop view?
    Thanks buddy

  • @barriemarch7115
    @barriemarch7115 Рік тому

    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!

  • @dandev8514
    @dandev8514 2 роки тому

    Great video thanks Clifton

    • @CliftonWP
      @CliftonWP  2 роки тому

      Thank you Dan! I appreciate you watching!

  • @joemq
    @joemq Рік тому

    Great video! On q - why is the custom width of the menu 375px - what does this correspond to?

  • @fermagnetservices9826
    @fermagnetservices9826 Рік тому

    Love your tutorials

  • @sisoMK
    @sisoMK 2 роки тому

    Great video! I think you skipped the part where you adjust the width of the grey border somewhere between 24:30 - 24:50

    • @CliftonWP
      @CliftonWP  2 роки тому +1

      Thank you! That part is right here: 30:40. The padding of the container creates the reduced border width.

  • @ArtOnScreenByPeterBono
    @ArtOnScreenByPeterBono Рік тому

    … You're simply the best

    • @CliftonWP
      @CliftonWP  Рік тому

      Thank you so much! I appreciate you!

  • @eamonmoriarty
    @eamonmoriarty 2 роки тому

    Great tutorial as usual

  • @victorl.mercado5838
    @victorl.mercado5838 Рік тому

    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?

  • @DanielleSethiTherapy
    @DanielleSethiTherapy 5 днів тому

    Hi! What about having the info boxes in 2 columns like on the kadence website?

  • @erinhybart
    @erinhybart 4 місяці тому

    You really put out good content

    • @CliftonWP
      @CliftonWP  4 місяці тому

      Thank you so much! I appreciate you and I appreciate you watching!

  • @stephenpleasant5653
    @stephenpleasant5653 Рік тому

    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

    • @CliftonWP
      @CliftonWP  Рік тому +1

      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

    • @stephenpleasant5653
      @stephenpleasant5653 Рік тому

      Thank you, Clifton. I was able to link the dropdown items with the corresponding page from your instruction.

    • @CliftonWP
      @CliftonWP  Рік тому

      @@stephenpleasant5653 Awesome!

  • @MedianM
    @MedianM Рік тому

    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.

  • @aleksandrrybakov3222
    @aleksandrrybakov3222 Рік тому

    Hi, Clifton!
    Thanks for the video.
    Is it possible to put a logo, phone, mail, buttons, etc. in the mobile menu?

    • @CliftonWP
      @CliftonWP  Рік тому

      You are welcome Alleksandr! Yes adding a logo, phone, etc, is very possible in the mobile menu.

  • @spurtalks1463
    @spurtalks1463 Рік тому

    Dear, It was amazing. But i am stuck on the point how we connect menu option with posts or pages

    • @CliftonWP
      @CliftonWP  Рік тому +1

      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. 🙂

    • @spurtalks1463
      @spurtalks1463 Рік тому

      @@CliftonWP Bundle of thanks dear, i have got it. 👍👍👍👍👍

  • @tomfraser3086
    @tomfraser3086 Рік тому

    Is it possible to make a mega Menu that links to WooCommerce Product Category Archive Pages ??

  • @MichaelFidelis
    @MichaelFidelis 2 роки тому

    nice work Clifton! Do you hide this menu in mobile?

    • @CliftonWP
      @CliftonWP  2 роки тому

      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. :-)

  • @africariviera
    @africariviera 4 місяці тому

    Thanks!

    • @CliftonWP
      @CliftonWP  4 місяці тому

      Thank you so much! Very much appreciated!

  • @fixngrow
    @fixngrow 11 місяців тому

    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.

    • @CliftonWP
      @CliftonWP  11 місяців тому

      Thank you so much! Anyway I can see the home page?

  • @mohsinshahzad8969
    @mohsinshahzad8969 2 роки тому

    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.

  • @heathcriswell
    @heathcriswell Рік тому

    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?

  • @markuserikssen
    @markuserikssen 2 роки тому

    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.

    • @CliftonWP
      @CliftonWP  2 роки тому +2

      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!

    • @markuserikssen
      @markuserikssen 2 роки тому

      @@CliftonWP Ah I didn't notice that, thanks a lot! I will check it out. Thanks!

    • @markuserikssen
      @markuserikssen 2 роки тому

      @@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?

  • @vvewii
    @vvewii Рік тому

    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. :(

    • @CliftonWP
      @CliftonWP  Рік тому

      Hi Wiktoria! Hope all is well with you. Do you have a screenshot I can look at?

  • @yazzys
    @yazzys Рік тому

    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! 😂

  • @LeventZeytinci
    @LeventZeytinci Рік тому

    Teşekkürler.

  • @geraldtucciarone2482
    @geraldtucciarone2482 Рік тому

    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.

    • @CliftonWP
      @CliftonWP  Рік тому

      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!

  • @tomfraser3086
    @tomfraser3086 Рік тому

    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..

  • @charliegerson7570
    @charliegerson7570 2 роки тому

    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..

    • @CliftonWP
      @CliftonWP  2 роки тому

      Charlie you are the greatest! Will do and thank you for your support!

    • @charliegerson7570
      @charliegerson7570 2 роки тому

      @@CliftonWP Thanks. Looking forward to that. You've made us fall so deeply in love with Kadence.