WordPress dropdown menus on today’s menu!
Site navigation is of the utmost importance when developing your website. It affects the ways your visitors interact with your website, products. Their purchasing behavior will be decided by the structure of your website.
Dropdown menus (also called nested menus) help you solve for limited menu space. If you have more website pages that are really important and should belong to a menu, you need to figure out a proper page hierarchy.
Important: Before starting with the technical part, you must choose a theme that supports dropdown menus. Our very own Colibri WordPress theme supports this feature.
Now, let’s see how we can build one.
How to create dropdown menus in the Classic WordPress editor in 3 steps
Step 1: Creating a simple WordPress menu
Go to the WordPress Dashboard and select “Menus” underneath “Appearance”
Next, select “create a new menu”.
Now give it a name, and select “Create Menu”
Now you have created an empty menu. It’s time to add some links to it.
Step 2: Add items to the WordPress dropdown menu
What you have to do now is tick the items you need and add them to your menu.
You can add to your menu:
- Custom links
- Blog categories
Need more pages? Go to Pages -> Add new.
But how do you obtain the dropdown feature?
Easy peasy, just drag the page you want under the page it will belong to, like below:
In the example below I added the blog categories as sub-items of the blog.
On our Colibri website, we went for a custom links menu approach.
We do not have separate pages for every menu item, instead we are using anchors and have a single page layout.
This means that whenever you select a menu item, your cursor will position itself to the specific section on the page.
You can use custom pages when you want to link to external pages or even your social media profiles.
Step 3: Select menu location
Satisfied with your menu?
If yes, it’s time to decide where you want to place it. Is it the main navigation? Do you want a left-hand side dropdown menu?
These are your options:
- Main Navigation
- Top Menu
- Primary Menu
- Footer Menu
Under “Menu Settings” you can choose the location for your menu.
Next, just hit “Save Menu” and you’re done!
Congrats, you’ve just built your first WordPress dropdown menu.
How to style WordPress dropdown menus
Do you want to take your WordPress dropdown menu to a whole new level through styling?
We’ve got 2 methods for you.
1. WordPress dropdown menus styling via plugins
If you’re not a CSS aficionado, then this is for you. You won’t need to write a single line of code.
CSS Hero is one of the most popular WordPress plugins that let you stylize with no code.
Here’s how you can install and activate WordPress plugins.
CSS Hero lets you work easily with margins, paddings, colors, shadows, typography and more. It will come in handy even for other styling, non-menu related.
Another cool feature for CSS Hero is the possibility to undo and access history changes.
2. Custom CSS Styling for WordPress dropdown menus
This section requires some more in-depth knowledge of CSS.
There are some default WordPress classes that you can work with.
WordPress navigation menus are shown as a bulleted list, or unordered list (<ul> in CSS terms). If you have more menus, you will need to identify them by class and position.
Some themes have their own classes added.
In the case of Colibri, there’s the class .colibri-menu.
When you deal with more menus in different locations, it’s important to specify the location,
#menu-primary .colibri-menu is an example.
Now, if you want to alter the styling of a <li> or <a> inside the bulleted menu list, you need to add your CSS code from “Custom CSS & JS”, like below.
How’s your menu?
Happy with it?
Don’t worry, you can always experiment with the navigation structure and its styling.
See you next time!