Wordpress Dropdown Menus in a Nutshell [Creation and Styling Tips Included]

WordPress Menus

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”

Appearance - menu

Next, select “create a new menu”.

create new menu

Now give it a name, and select “Create Menu”

Give your WordPress menu a name

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:

  • Pages
  • Posts
  • Custom links
  • Blog categories

add pages to WordPress menu

Need more pages? Go to Pages -> Add new.

Add new WordPress page

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:

Screen Recording 2020-09-02 at 08.50.58.32 AM.gif

 

In the example below I added the blog categories as sub-items of the blog.

blog categories added to WordPress dropdown menu

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.

Custom links added to WordPress dropdown menu

Anchored WordPress menu

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.

WordPress menu location

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.

Menu classes

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.

 

Conclusions

How’s your menu?

Happy with it?

Don’t worry, you can always experiment with the navigation structure and its styling.

 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

 

See you next time!

 

[sibwp_form id=1]

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE