How to Create a Dropdown Menu in WordPress Beginners Guide
HTML-код
- Опубликовано: 12 июн 2024
- 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 wpforms.com/wpbeginner
►Best WordPress Analytics Plugin www.monsterinsights.com/
►Best Lead Generation Plugin optinmonster.com/
►Best WordPress SEO Plugin aioseo.com/
►Best Landing Page Builder for WordPress www.seedprod.com/
►Best WordPress Giveaway Plugin rafflepress.com/
-Related Videos-
►WordPress Tutorial - How to Make a WordPress Website for Beginners • 📘 WordPress Tutorial -...
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor • 🧱 How to Use the WordP...
►What is SEO and How Does it Work? • 🧱 How to Use the WordP...
►How to Install a WordPress Theme • How to Install a WordP...
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:
• How to Add a Mega Menu...
If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.
ruclips.net/user/subscription_...
Feel free to take a look at the written version of this tutorial here:
www.wpbeginner.com/wp-tutoria...
Check us out on Facebook
/ wpbeginner
Follow us on Twitter
/ wpbeginner
Check out our website for more WordPress Tutorials
www.wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner 
Хобби
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,.
Glad we could help simplify the process :)
Super helpful! I had watched a couple of videos from others that weren't as clear. You got straight to the point! Thanks!
You're welcome, glad you found our content helpful :)
Thank you so much for this! I was struggling so much after reading so many articles. You explained it so easily 😊
Glad our guide was helpful :)
Amazing! Well explained and exactly what i needed to create submenus. Thank you very much
Glad our guide could help :)
Thank you so much for explaining. I was loosing track on the manage location part. The web really has everything! Thank you once again. God bless you. :)
You're very welcome :)
Thanks! I wasn’t sure how to create a dropdown menu. So many other channels over complicated it! Appreciate it!
Glad we could help!
Legend! This was a great tutorial, thanks for sharing your knowledge.
Glad it was helpful!
Than'ks for sharing ! you're a pure gold among silver !
You're welcome, glad you like our video :)
Love this. Thank you very much. This gave me exactly the info I needed
Glad it was helpful!
Great content. Quite helpful for beginners like me!
Glad we could be helpful :)
Thank you! You explained this so well!
Glad it was helpful!
Nice video, thank you for sharing it with us.
Thanks and you're welcome :)
thanks for explaining, you tutorial is the one that help me
Glad we could help :)
Excellent tutoring videos!
Glad you like them :)
nice work, good girl, thank you, you probably saved me 4-5 hours
Glad our video could help :)
really important video for me thanks
Most welcome :)
Great video, thank you!
You're welcome :)
Thanks for this information. My dropdown menu is transparent and I'm having trouble figuring out how to change the colours for just the drop down bit of the menu. Can you point me in the right direction?
You would likely want to reach out to the support for your specific theme but you could use Inspect Element to try tweaking your dropdown. We have a guide on how to use Inspect Element below:
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
thanks this helped a lot
Glad it helped :)
THANK YOU SO SO MUCH
You're welcome!
Awesome Course Description.
Great
Glad you like it!
thank you very much miss it is very helpful.
Glad it was helpful!
Hello, in your example when hovering over the "Markup" page tab the drop down list appears, but the "Markup" page tab can still be clicked. Is there away for that page tab to not be clickable and be there just to serve as the way to reveal the drop down list?? TYIA!
You would set that as a custom link, normally pointing toward #
@@wpbeginner Thank you.
You are amazing! Thank you!
You're welcome!
Thank You So Much. ❤❤❤
You're welcome :)
Thanks for sharing this. But I didnt really get what exactly happened at 1:46.
am assuming, you have a website and a primary menu with existing pages.
So to demo how to create a drop down menu, did you create a NEW website with NEW Pages ? you kinda fast forwarded it quickly and that seems to be the most critical step in creating a drop down menu.
You don't need a new website, you would add the menu items you want to include into your new menu by clicking the Add to Menu button. Your options you're able to use are your published pages and posts, as well as categories and other sections on the left-hand side of the page
Very helpful thank you
Glad it was helpful!
Nicely done!
Thanks!
Great! Thanks for ur sharing! But could u plz let me know why dropdown menus on wordpress doesn't work on phone?
More than likely your theme has a mobile specific design, if you reach out to your theme's support they should be able to assist.
Thank you so much
You're most welcome
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!
You would want to reach out to the support for your specific theme and they should be able to take a look and solve this issue for you :)
Hi came through this channel good explanations, i want to know that how to create a blank menu "team profile" and sub menus under it?
If you mean a menu item that does not link to a page you could use a custom URL and have the URL be #
Hi, I have my own travel & sport blog and most of my menu positions are categories not pages. I have only one page actually which is "about me" page, all the posts are put in categories - that's it. I am not sure it is the correct way. What are the major difference from the functionality point of view between those two and which option is basically better for smooth management of the site? Thanks in advance for you prompt support.
That would be a personal preference question rather than what is best.
This was great! Do you have a video instructing how to create same dropdown for a side widget?
It would depend on your specific theme's styling but you should be able to add a menu widget to your sidebar and you should be able to select the menu in the widget for it to display.
@@wpbeginner Thanks for taking the time to respond!
Thank you!!!
You're welcome!
Perfect video
Glad you enjoyed it :)
very helpful
Glad it helped
Thank you
You're welcome :)
Please help- Ive created a site using Astra Theme. The menus and submenus are working perfectly fine in the site. The issue which im facing is that on the other pages, apart from the home page, the main menu and submenu are there but they appear to be faded. kindly let me know how can i fix it.
You may have set a transparent header. You can see Astra's documentation on it below:
wpastra.com/docs/astra-transparent-header
If none of these are set you would want to reach out to Astra's support directly and they can assist.
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
The most common reason for that would be if the text color matches the background color, you can check if the text is till there using our guide on inspect element below:
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
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.
You may want to make sure that the posts are published, the link in the menu is to the category and not a page with the same name, and your cache has been cleared for the most common reasons :)
@@wpbeginner Thank you so much
Hello! I was wondering how I might make a dropdown menu where the first option doesn't take you to a page. For example, I have a dropdown named "Menu' and would like the dropdown items to be "Item 1", "Item 2", and "Item 3", but I don't want the "Menu" to be clickable. Rather, the user hovers over it, sees the dropdown, and selects from items 1-3
That can sometimes cause confusion when an item in your menu does not go anywhere but for that, you would use a custom URL and in the URL field add: #
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.
That would depend on the specific form plugin you are using for if that is an option or if there would be a dropdown option or a different method to set that up
thumbs up! thx
You're welcome :)
Thanks for giving us such great material free. I watch your all videos but 364 remaining and watch in next week, In Sha Allah.
You're welcome, glad you've found our videos helpful :)
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?
You would want to use the Custom URL option to add the # in the URL field.
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.
The locations available are determined by your theme, we've only named the menu drop down menu but you should still be able to use the same method as in this video.
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
You would want to reach out to Elementor's support for what options they have available at the moment.
hey WPBeginer. How to make a dropdown menu but the main menu is not clickable?
We would caution against that to avoid confusing your users but you can create a custom url that links to #
I created a multiple category drop down menu, but there is something wrong with it. I have three categories in that menu, but I can’t see any of them. If I click on those three blank spots, it will take me to those categories. I’m not sure why I can’t see them listed?
You may want to try highlighting the text in your dropdown, if you are able to then your theme may have the text and background color set to the same color for the most common reason for that :)
How do we change the drop menu box color? and the hover color?
It would depend on your specific theme, the simplest method would be to use inspect element to change the CSS for your specific theme:
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Can I place other categories as sub items under the category ??
Cause I did and now when I click on the category as menu item it auto cliclks on the 1st sub item and won't let me click on the other sub items
You would want to reach out to your theme's support to see if this is a feature of your specific theme. By default you should only need to hover over the menu item for the sub items to appear.
@@wpbeginner thanks for the reply , learnt alot from the wpbeginner site , I'm using Astra theme , i placed a category as a menu item, and then placed other category items as sub items of the category menu item , that is why I'm getting the trouble ,hope u got my question ,
i think i shouldn't place categories items as sub items of parent category item, while instead i should place under the page or blog page
Thanks for the reply
How to load and display Excel data on click of drop-down menu. Please explain. Is it possible?
While it wouldn't pull in the information each time someone visits, you can display the data using the method from our guide below:
www.wpbeginner.com/plugins/how-to-add-tables-in-wordpress-posts-and-pages-no-html-required/
@@wpbeginner Thank you
how to not expand the menu dropdown and show the content in other page pleaeaseeeeee your help is much needed
Thank would require you to use a widget instead of a menu if we're understanding what you want correctly.
@@wpbeginner no ididnt understand i dont think this is easy as you tell like this
Please, can I know how to make the sentence continuation on one row in the menu drop-down menu in WordPress?
It would require some customization of your CSS to put the menu in an inline block. We would recommend reaching out to the support for your specific theme and they should be able to assist.
@@wpbeginner thank you very much
Hi, how do you hide your mega menu and sub menu. Pls can you help me out
I don't understand your question, for setting up a mega menu, we would recommend taking a look at our guide below for how to set one up that may be able to help.
www.wpbeginner.com/plugins/how-to-add-a-mega-menu-on-your-wordpress-site-step-by-step/
help me, here in the menu the markup option is clickable so I want to know that how could I make my main menu item unclickable and its subcategories on clickable
We would be cautious with that as menu items that do not work can confuse your users. If you create a custom link menu item and set it to # it should do what you are wanting.
any way to remove the arrows in the dropdown menu?
That would depend on your specific theme, if you reach out to your theme's support, you should be able to get assistance with removing them
i changed my theme today and suddenly my drop down menu stopped working...please tell me how to fix it..actually submenu is showing in phone bt not in pc
You would want to reach out to your theme's support to see if this is possibly an issue with the theme's styling
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??
It would depend on your specific theme for what options are available, there should be a checkbox at the bottom of the menu for selecting which theme area to place it in.
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?
For the design of the dropdown you would want to check with the support for your theme, but your other option would be to have fewer items in your dropdown or have options within the dropdown options.
For those trying to make the category not-clickable, here’s how you do it.
Instead using a category, use a custom link. Go to Appereance>Menus>Custom Link
Name the Custom Link, and make the URL #
Once added to desired location, click on the custom link dropdown and delete the # from the URL
One warning for not having a menu item clickable is it can sometimes cause users confusion when a link on the menu does not go anywhere. :)
For some reason my dashboard looks differently to yours and I can't find these buttons... what can I do?
You are likely on WordPress.com which you can see our comparison on WordPress.com bs org below:
www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
how can I edit the style of dropdown menu?
It would depend on the type of styling, you would either need CSS knowledge or a page builder like Beaver Builder
So if you have a menu and you have to sub menus and you only want to offer what's on the sub menus how do you block the main menu? you didn't mention it
You would have the URLs for the primary menu items linking to # you would want to be careful with this as some users may think your entire menu is broken if none of the parent menu items work.
The words "sub item" do not appear. I successfully got them into the dropdown tab, BUT they all show as separate menu buttons too
Glad you got them into a dropdown, you may need to check with the support for your specific theme for the styling of your menu.
I create drop down but not good. Its box of submenu is bigger than menu?
You would want to reach out to your theme's support for that issue, more than likely it is a styling issue with your specific theme.
@@wpbeginner thank much
Mine doesnt have drop down in manage locations. I have a side menu
Your theme may have specific styling to override menus. You may want to reach out to the support for your specific theme to see the current options.
My menu is also opening in a new page what to do
You would want to check in your menu settings to ensure you don't have the open in a new tab box checked
@@wpbeginner how can I do that
@@wpbeginner I have made the main menu a catergory
Never mind! I had a basic plan, that's why lol
Glad you found the reason :)
I can't find my sub menu editor on wordpress
If you can help me please
There isn't a sub menu specific editor, you would use the same editor that you would for your menu
hello i watched your video how to hide dropdown menu especially if you a lot of tunnels and subcatgeories ❤️❤️❤️❤️❤️
Glad you watched our videos :)
why learning wp is harder than learning js???
It would depend on what you are trying to learn. If you are just getting started, we would recommend taking a look at our guide below:
www.wpbeginner.com/start-here/
I don't have a "menus" 😞
If your theme uses uses the full site editor which would remove that section, then we would recommend taking a look at our article below that covers the method you would use:
www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/#add-menus-in-fse-themes
ok thats great, but lets say you don't want "markup" to be clickable, so it only drops down and they cant go into the markup page
We normally don't recommend doing that but if you wanted to you could create a custom link menu item linking to # for what you're wanting.
@@wpbeginner why dont you recommend that
@@wpbeginner is there any other way?
@@wpbeginner On my site I wanted the "Markup" Page to show up as well as the dropdown list, but when I add a sub-item the main page won't show content anymore! Its like it just disappears, I use Divi, how could I stop that from happening? I looked everywhere on the internet and can't find this explained anywhere... Please help
you made it very complicated
We apologize you feel that way. We'll make sure we try to keep our tutorial simple.
@@wpbeginner simly go to customise then menue then add pages and drag....