The WordPress Menus Diaries: Beginners Guide [Tips and Tricks]

WordPress menus

Do you want to create a WordPress menu and don’t know where to start?

 

This article will shine a light on the types of menus available and also the methods at your disposal to build such menus.

 

But, first things, first:

What can you include in WordPress menus?

 

  • Pages. You can add here services pages, the “contact us” page, the blog listing, and more.
  • Posts. This refers to your blog articles.
  • Custom links. You can link to external pages, to social media profiles but you can also create anchor-based menus, for single page websites. This means that the moment you select a menu item, you’d be directed to that specific page section. 

This is how we organized most of our website.

Custom links based WordPress menu

  • Blog categoriesblog categories added to WordPress dropdown menu

Types of WordPress menus

 

Definitely, the horizontal menu is the most popular one, and on mobile, we all recognize hamburger menus, but what other options are out there?

 

See below.

 

  • Horizontal WordPress menus

The most common navigation menu style is the horizontal text-based one. In this navigation menu, you have a list of your main page sites.

horizontal WordPress menu example

  • Vertical WordPress menus

Rarely used, vertical WordPress menus can be positioned on the left or right-hand side. Their biggest downside is the fact that they use up important screen real estate.

  • Hamburger menus

The hamburger menu or three-line menu is a common solution often seen on mobile devices, for responsive websites. When tapped, the traditional menu unfolds. This is a stylish and subtle menu design, that is sometimes used on desktop by minimalist websites. It seems that Amazon began to use it as well.

Amazon hamburger menu

  • Sticky WordPress menus

Sticky or fixed navigation means that the menu does not disappear when scrolling happens. Sticky menus are very trendy right now. I feel that they are improving user experience, by eliminating unnecessary scrolling back. 

Screen Recording 2020-09-02 at 02.36.50.03 PM.gif
  • Dropdown menus

When there are more pages that you want to showcase, and they can be considered subtopics of a larger topic, you can structure the menu in the dropdown format.

Let’s say you have more SaaS products in the menu. A sub-items list could look like: Features, Testimonials, Clients, Case studies.

 

In our own case, we used a tiny dropdown menu for support documentation and contact.

Colibri dropdown menu

We’ve covered the dropdown WordPress menus topic in this in-depth blog article.Menus joke

  • Mega-menu

 

The mega menus offer more than a dropdown menu and are often seen in e-commerce websites that have many options (they seem like dropdown menus inside other dropdown menus :)) ). Their downside is that they can be overwhelming. Always ask yourself if you really need such a menu, or some filtering options might be the right solution. Also, they can be truly tricky on mobile.

 

Now that you figured out your menu options, let’s build one. I’ve made a 4 methods list, pick your winner! If you are interested in a particular method you can jump straight to it by clicking on the title below.

 

How to create WordPress menus in the Classic Editor in 3 steps

Step 1: Creating a simple WordPress menu in the Classic Editor

Go to the WordPress Dashboard -> Appearance, then select “Menus”.

WordPress Dashboard Appearance Menus

Next, select “create a new menu”.

create new menu

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

Step 2: Add items to the WordPress menu using the Classic Editor

If you haven’t previously created your WordPress pages, make sure to create them under WordPress Dashboard -> Pages-> Add New.

add new WordPress page

Next, all you have to do is add your desired pages, posts, blog categories to the newly created menu.

Add items to WordPress menu

If you want to add new pages to an existing menu, you can select your menu from Edit Menus.

select WordPress menu

Step 3: Select menu location in the Classic Editor

My current Colibri theme supports 5 menu locations:

WordPerss menu locations

Most of the themes have similar options. Just assign your menu to the place you want it to show up. Is it the header primary menu? Are you working on a footer menu?

Once you’ve selected your location, just hit “Save Changes” and go back to the “Edit Menus” section and hit “Save Menu”.

 

That’s it, you’re live!

 

Piece of cake, don’t you think?

 

How to create WordPress menus in the Customizer in 3 steps

Another menu for building a WordPress menu is to do it inside the WordPress Customizer or any other WordPress builder. Don’t forget, your options are limited by the theme you’re using.

 

Now, follow the steps below to create your WordPress menu.

 

In this particular example, I’m using the Colibri theme and Colibri Builder combo. 

If you like more visual examples, check our tutorial below.

Step 1: Creating a simple WordPress menu in the WordPress Customizer

From the WordPress Dashboard head to Appearance -> Customize. From the left-hand side menu, select “Menus”.

Menus in the WordPress Customizer

 

Next, select “Create New Menu”.

create menu from the WordPress Customizer

In the new section you have to:

  • Name your menu
  • Select where to position the menu. Is it a page menu, a footer, or a header one?menu location in the WordPress Customizer

 

After that, hit “Next”.

 

Step 2: Add links to your WordPress menu using the WordPress Customizer

 

Here comes the most interesting part: adding the pages to the WordPress menu.

 

For that, you need to select “Add items”.Add links to WordPress menu

A new menu will show up, with your options.

Add WordPress menu items

Once you’ve selected the items, it’s time for going live!

 

“Publish” is your go-to button now.

 

Step 3: Publish your menu

 

Now, “Publish” is your go-to button now.

You also have the option to save the menu to draft or schedule it for later.

WordPress menu publishing options

Aaaand…you’re done.

 

Easy peasy this one as well.

 

One more cool thing about some WordPress builders.

 

You have the option to add ready-made components. Just after entering the Customizer, you’ll see a “+”. In the search bar that shows up, in the Components menu, type “menu”.

Add WordPress menu components

 

Just drag and drop your desired menu and start styling it!

 

How to create WordPress sidebar and footer menus using widgets

 

Sidebar and footer menus have different purposes.

 

In e-commerce websites, the left sidebar is usually used for filtering.

 

Blogs often use right sidebar menus, where they can include most recent posts, the social media icons, videos, and more.

 

In this blog section, I’ll explain how you can customize these areas.

Step 1: Go to the WordPress Widgets area

In the WordPress dashboard head to Appearance -> Widgets.

 

The widget options can differ from theme to theme.

 

On the left, you’ll see all your available widgets.

widgets to be added to sidebar menus

If these aren’t enough you can always install a plugin that will install new widgets for you.

 

Now, on the right side, you’ll see the areas you can customize, in this particular case we have more footer areas, a pages sidebar, and a sidebar widget area.

sidebar and footer widget areas

Step 2: Drag and drop your widgets to your widget area

 

Let’s say you want a banner on the right-hand side, to use for newsletter subscription.

 

What’s the widget you need? A subscription-related one. If your theme doesn’t have one, you’ll need to find a plugin.

 

Because we use Mailchimp as our newsletter sending tool, we installed the plugin that lets us integrate WordPress with Mailchimp. MC4WP is the name of the plugin.

 

Inside the plugin, we designed our form. We didn’t go for the built-in styles but used our own HTML code and styling.

Custom styling example

The plugin made available the “Mailchimp Sign-up form” widget. All I had to do was to drag it to the Sidebar area and select my newsletter form.

mailchimp widget

drag and drop WordPress widget

When you look above you see the Colibri blog right sidebar. It contains the following widgets:

  • Search bar
  • Recent posts section
  • Social media icons – deployed via a plugin as well
  • Mailchimp Sign-Up form
  • Custom HTML – we used this built-in widget to code a banner

How does this look like on the actual blog (just look a bit to your right  😜 👉).

Blog sidebar menu example

If you want to have your primary menu on the right-hand side, you’ll have to create it as in the steps discussed in the section “How to create WordPress menus in the Classic Editor in 3 steps“.

 

Next, go to your widgets section and drag and drop the “Navigation Menu” widget to your sidebar.

 

Now it’s time to select your menu. Select WordPress menu to add to the sidebar

Important: your changes go live in real-time.

 

The Navigation Menu widget can be added from the Customizer’s widget areas as well.

navigation menu WordPress widget

How to create WordPress menus via plugins

And we’ve got to our latest method of adding WordPress menus to your website.

 

One thing you need to remember: the more plugins you add, the slower the website will be.

 

Always ask yourself if that plugin is really needed.

 

The value added by these plugins consists in a lot more rich media and effects options that can help you create more eye-catching menus.

 

One of the most popular plugins out there is UberMenu.

uber menu

Highly customizable, responsive menus can be built with UberMenu.

From dropdown, horizontal, vertical to mega menus, you can build them all.

 

Lots of triggers available, custom CSS can be added as well.

 

Now, you can always compare various menu plugins in wordpress.org. Just head to plugins, and type “menu” in the search bar. You will see many options, you can check the number of installs and reviews as well.

wordpress.org menu plugins

There are all sorts of WordPress menu plugins available. You want to build hamburger menus, there’s a plugin for that. Wanna have a sticky menu? There’s another plugin for that.

 

How to create sticky WordPress menus

If you’re lucky, your theme might support sticky menus.

 

If not, as I mentioned above, there’s always the option of using a plugin for your sticky WordPress menu.

 

But if you’re into CSS, you can easily write some tiny code under Appearance -> Customize -> Custom CSS.

 

Using the “Inspect element” you will have to identify the id of your menu.

 

Then, your code could look like this:

css styling - sticky WordPress menus

The most important lines that need to be added are the ones with z-index: 9999 & position:fixed. These are the ones that affect the stickiness. 

 

The rest of the code affects only the styling in terms of color, alignment, borders, dimensions, etc.

 

Conclusions

It was a long one…don’t you think? But it was for the greater good: for you to understand the nitty-gritty of WordPress menus.

 

The story can continue with custom styling, but I’ll save this one for later.

 

Let’s wrap it all now. Today you’ve learned:

  • What you can include in a WordPress menu: from pages and posts to custom links and categories.
  • Which are the types of menus out there, so that you can make a more informed choice.
  • How to build your WordPress menu using the Classic Editor, the Customizer, WordPress widgets, plugins.
  • How to create sticky/floating menus 

 

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

 

You’ve been served 😉

 

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE