Skip to Main Content

How to add a navigation menu to a WordPress page

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Would you like to display a navigation menu on your WordPress posts and pages?

Generally, your WordPress theme offers a navigation area where menus are displayed.

But, in this tutorial, I'll show you how to display a navigation menu on your articles and WordPress pages.

If you've never installed WordPress, find out How to Install a WordPress Blog in 7 Steps

Wp menu navigation in wordpress articles and pages e1565800786193

Why add a navigation menu to WordPress pages and posts?

The WordPress menu interface provide a quick way to structure menus. You can create as many menus as you want from your WordPress dashboard, and organize them however you want.

What to do if you want to display a menu only in a page or WordPress article ? In this case, you will need to manually create links, which is not as easy to manage.

How to add menus to WordPress articles and pages

All you need to do is install the plugin " Shortcode Menu ". For more details, you can consult our guide on how to install a WordPress plugin.

Before you start using the plugin, you will need to create navigation menus in the " Appearance> Menus ».

You can also consult our guide on creating WordPress menus.

Once you have installed the plugin, you will need to click on Shortcode Menu available on the left side menu of your dashboard. You will be taken to a page where you can generate the shortcode from the menu.

Shortcode from the WordPress plugin menu

You must first select the menu you want to use. Select the menu from the drop-down list Select Menu ". You will also be able to add a class and an identifier for your menu.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

What you need to do next is choose the menu display style. By default, your menu will be displayed as a block, but you can change this to an online display (horizontal).

presentation of a bulk menu

You can also change the color of the menu in the section " Design your menu on the fly ».

By the way, we also invite you to discover our 10 premium WordPress plugins to create menus

 This plugin allows you to select the background, hover color and anchor color.

At the bottom of the generator, you will find the shortcode that corresponds to the options you have defined. You will simply have to add this shortcode in a page or an article of your choice. You can even display this menu in a widget.

shortcode WordPress generator widget

The plugin adds an acceptable basic style. But if you want to customize it, you will need to make some CSS changes.

In the second column of the plugin parameters, you will find portions of CSS code. You can use them as a starting point for your CSS customizations. So you can add it to your child theme, or use the plugin " Simple Custom CSS ».

If you are not familiar with CSS, you can try the WordPress plugin CSS Hero.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

But conversely, if you need premium options.

We also offer you 3 premium WordPress plugins dedicated to this task.

1. Menu Hero

This plugin allows you to create a custom WordPress menu in a few easy steps. It allows you to easily and intuitively create an elegant and professional WordPress menu, a complex feature-rich megamenu, and more.

Hero menu responsive wordpress mega menu plugin

In terms of features it offers among other things: perfectly functional on PC, tablet and smartphone, easy to use, customizable content, custom CSS to add your own menu styles, megamenu designer, supported browsers: Chrome, Firefox, Safari, Opera, IE9 and more.

Download | Demo | Web hosting

2. WP Floating Menu Pro

WP Floating Menu Pro is a smart WordPress plugin that allows you to improve the management of your website thanks to a Onepage navigation module and many other sticky menus. Use this plugin to create Onepage navigation on any WordPress theme.

Wp floating menu pro one page navigator sticky menu for wordpress

 Just set the sections on your website and create a one-page navigation menu in minutes. WP Floating Menu Pro gives you the ability to create unlimited navigation menus. You can choose from 13 beautiful templates or customize your own menu.

Download | Demo | Web hosting

3. Slick Menu

Slick Menu is not just a menu plugin for WordPress. It can be used to create unlimited menu levels, as well as sidebars with rich content, multiple styling options and animated effects.

Slick menu responsive wordpress vertical menu

Each menu level is customizable with background colors, images, videos, custom fonts, and more. This plugin is completely responsive and has over 45 animations for the menu items.

Download | Demo | Web hosting

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Recommended Resources

Discover other recommended resources that will help you create menus on your website.

Conclusion

Here is ! That's it for this tutorial. I hope it will allow you to display menus on your pages and WordPress articles. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
3 shares
Share2
tweet
Save1