Blog

WEBFI-WordPress-How to Create a Dropdown Menu in WordPress Beginners Guide



Do you want to make a dropdown menu and add it to your WordPress website? A dropdown menu shows a list of links as you take your mouse over them on the menu. We use a dropdown on our own site and in this guide, we will show you how to easily create a dropdown menu un WordPress with step by step instructions.

Use Promo Code WPBVIP
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin https://aioseo.com/
►Best Landing Page Builder for WordPress https://www.seedprod.com/
►Best WordPress Giveaway Plugin https://rafflepress.com/

–Related Videos–

►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90

Timestamps
0:00 Intro
1:08 How to create a menu for dropdown
1:53 How to create pages to add to the menu
3:03 How to add categories to your menu
3:14 How to add submenu items to your main menu
4:02 How to add your menu to your menu location
5:50 How to create a menu using the customizer

We’ll start by going under Appearance, Menus and create a new menu or edit the menu where we would like to add the dropdown. We will add the pages and posts that we want to include in the menu to organize. The selected content will be in your menu area and you will have the ability to modify the order here.

To add the dropdown you would want to drag the menu item to the right and drop it. WordPress should move it to the right and name it a sub-item. This will place it beneath the content as a dropdown option that you can save to keep it there. Now you can use the checkboxes below the menu or go into Appearance, Customize and choose your theme-specific location to add the menu.

If you would like to create a mega-menu on your site for more control you would want to take a look at our guide here:

https://youtu.be/wCS2R5U9LCg

If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner

Feel free to take a look at the written version of this tutorial here:
https://www.wpbeginner.com/wp-tutorials/how-to-create-a-dropdown-menu-in-wordpress-beginners-guide/

Check us out on Facebook
https://www.facebook.com/wpbeginner

Follow us on Twitter
http://twitter.com/wpbeginner

Check out our website for more WordPress Tutorials
http://www.wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner

source

38 Comments

  • Ritze on December 16, 2020

    any way to remove the arrows in the dropdown menu?

  • Alias Alias on December 23, 2020

    Is there a way to do this with a custom menu I’m using elementor header footer editor it’s free I just added a menu using that, the drop down shows but not the sub item

  • Beauty Care Code on December 31, 2020

    Thank you so much. I have the same drop-down menu but when I click the category that I have under blog, it does not take me to the posts that I have written under that category. can you please let me know what has gone wrong? thank you.

  • Kateřina Lukešová on January 6, 2021

    thumbs up! thx

  • Battery King on January 8, 2021

    The Drop Down sub items labels are not appearing they are just look blank in the main page but they are there, when you go to any other page they are visible and readable, i also tried astra is there a way to solve this? tried additional css but no luck

  • David & Leah Zanolla on January 15, 2021

    Is it possible to add a dropdown menu on a specific page while using blocks? We want to add a dropdown menu on our "contact us" form where a visitor can choose a specific person to work with.

  • Nostalji Oyun Kanalı on January 21, 2021

    Before i watched your video i was thinking to write my own dropdown menu codes but now i did easily with your help. Greetings from istanbul.

  • Ngrok Station  on January 27, 2021

    how to not expand the menu dropdown and show the content in other page pleaeaseeeeee your help is much needed

  • Malm on January 29, 2021

    hello i watched your video how to hide dropdown menu especially if you a lot of tunnels and subcatgeories ❤️❤️❤️❤️❤️

  • Ana Lisa on February 1, 2021

    you made it very complicated

  • Brody Hall on February 3, 2021

    Legend! This was a great tutorial, thanks for sharing your knowledge.

  • Travel With Melon on February 4, 2021

    THANK YOU SO SO MUCH <3

  • Wayne Martin on February 6, 2021

    Thanks so much for this article. As a novice I was having a lot of trouble trying to create dropdown menus and thought it was some kind of dark art involving a complicated plugin or CSS editing. I feel a bit silly given how easy it is the way you explained it, but very grateful,.

  • siny sorn on February 8, 2021

    Great! Thanks for ur sharing! But could u plz let me know why dropdown menus on wordpress doesn't work on phone?

  • Traditions Home on March 5, 2021

    Nicely done!

  • domgis on March 6, 2021

    For some reason my dashboard looks differently to yours and I can't find these buttons… what can I do?

  • domgis on March 6, 2021

    Never mind! I had a basic plan, that's why lol

  • sana fatima on May 3, 2021

    Thank you so much

  • dr soekyaw on May 13, 2021

    very clear TQ!

  • Samuel's Food Gardens on May 19, 2021

    The words "sub item" do not appear. I successfully got them into the dropdown tab, BUT they all show as separate menu buttons too

  • Suma Bhaskar on May 20, 2021

    How to load and display Excel data on click of drop-down menu. Please explain. Is it possible?

  • Limanor Kabinet Tv on May 21, 2021

    And how to add catagories?

  • محمد حسام on May 29, 2021

    I have a very long dropdown menu that makes the site look poor
    How do I hide the drop-down list without deleting it?
    Or how do I coordinate it well?

  • Nischal Adhikari on June 1, 2021

    thank u so much it really help me i was stuck here for 2 days u really need great appricatation thank u ones again

  • Jordyn Redd on June 21, 2021

    Thank you!!!

  • How to make a drop down menu where the main menu item doesn't have a link (so like, it's #). My admin panel doesn't have access to that, so I'm wondering if it's exclusive to business plans/certain custom themes?

  • Mary Prater on July 11, 2021

    Somewhere you lost me. I created the menu with categories but I couldn't figure out how to place that menu on the page (Shop page) I wanted it to appear. Did I miss something??

  • Evangeline Rice on August 1, 2021

    Great video, thank you!

  • Yudha Saputra on August 4, 2021

    Hi thanks for the explanation, it's a great video.

    I have a question. Let's say I have a three-level menu. First the primary, second the first child, and last is the second child. At this point, all menus have already been created, but when we try to hover the cursor, it seems a bit long for a menu. When I try to shorten, the second child appears under the first child, which still makes the menu still looks quite long.
    I wonder how to make the second child appear on the right side instead of appearing below the first child?

    Any additional CSS suggestions are welcome.

    Thank you and stay safe!

  • Vickie V on August 8, 2021

    Super helpful! I had watched a couple of videos from others that weren't as clear. You got straight to the point! Thanks!

  • Zeynep Betül on September 10, 2021

    why learning wp is harder than learning js???

  • Robert C Lynch on September 21, 2021

    Very helpful thank you

  • Christie Harris on September 28, 2021

    I add a new menu, but it did not show up when I refreshed the page. I deleted the new menu. I need to create/add a new menu and nest 3 subpages within the new menu. One of the subpages needs to be a link to a pdf. I have trued the new menu page a couple of times and it did not work. Can someone assist me?

  • Joe the Scientist on October 17, 2021

    4:06 this configuration does not exist anymore in Wordpres???. It seems like today (2021) when you go to –>manage locations only shows primary menu and footer menu as the only 2 options.. If anyone know where to find the "droop down menu" option please let me know.

  • RockLite on October 18, 2021

    thanks for explaining, you tutorial is the one that help me

  • Video Tech on November 11, 2021

    Awesome Course Description.

    Great

  • NotableTalks on November 20, 2021

    How do we change the drop menu box color? and the hover color?

  • LOVE ASMR SLIME on November 23, 2021

    very helpful

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

error: WEBFINET SECURITY IS ON