navigation menus in wordpress

June 9, 2022

How to Create a Vertical Navigation Menu in WordPress

Are you looking to create a vertical navigation menu in WordPress?

In WordPress, navigation menus can be displayed horizontally or vertically. Vertical menus offer a number of advantages, such as fitting your website’s sidebar better and being easier to navigate on mobile devices.

In this article, we’ll show you how to create a vertical navigation menu in WordPress.

What Is a Navigation Menu?

A navigation menu is a list of links pointing to important areas of a website. They are usually presented as a horizontal bar of links at the top of every page on a WordPress website.

Navigation menus give your site structure and help visitors find what they’re looking for. You can add links to your most important pages, categories or topics, WordPress blog posts, and even custom links such as your social media profile.

But while you often see them placed horizontally at the top of a website, vertical navigation menus have many uses and advantages.

With that being said, let’s take a look at a number of ways to create a vertical navigation menu in WordPress. Here are the topics we’ll cover in this article:

Try Different Menu Display Locations
Adding a Vertical Navigation Menu to the Sidebar
Creating a Vertical Navigation Menu on a Post or Page
Adding a Vertical Navigation Menu Using the Full Site Editor
Creating a Vertical Navigation Menu using a Theme Builder Plugin
Creating a Responsive Vertical Navigation Menu for Mobile Devices
Creating a Drop Down Menu in WordPress
Creating a Mega Menu in WordPress

When you add a navigation menu to your website, it will be displayed either vertically or horizontally. This depends on your theme, as well as the menu location you select.

The number of menu locations that are available depends on the theme you are using. You may find that some of these locations display the menu vertically.

To test this with your theme, you need to navigate to Appearance » Menus. Here you can experiment to see which locations are available on your website and how they are displayed.

Note: If you see ‘Appearance » Editor (Beta)’ instead of ‘Appearance » Menus’, then your theme has Full Site Editing (FSE) enabled. You’ll need to refer to the Creating a Vertical Navigation Menu Using the Full Site Editor section below.

For example, the Twenty Twenty-One theme doesn’t offer any vertical locations, while the Twenty Twenty theme offers one, called ‘Desktop Expanded Menu’.

The Twenty Twenty Theme Has One Vertical Menu Location

You can simply select the menu that you wish to display vertically, and then check the ‘Desktop Expanded Menu’ box at the bottom of the screen. After that, you must make sure to click the ‘Save Menu’ button to store your settings.

This is how it looks on our demo website.

Twenty Twenty Vertical Menu Position Preview

For more information on editing menus and menu locations, you can see our beginner’s guide on how to add a navigation menu in WordPress.

No matter what theme you’re using, it’s easy to add a vertical navigation menu to the sidebar using a widget.

First, you’ll need to create a navigation menu that you want to display, if you haven’t already.

Then you need to navigate to Appearance » Widgets. From here, simply click the blue ‘+’ block inserter button found at the top of the page, and drag the Navigation Menu block onto the sidebar.

Add the Navigation Menu Block to the Sidebar

After that, you can give the widget a name and select the menu you wish to display from the drop down menu.

Here’s how the vertical sidebar menu looks on our demo website.

Preview of Vertical Navigation Menu in Sidebar

You can add a vertical navigation menu to posts and pages in a similar way.

First, you need to create a new post or edit an existing one. After that, you need to click the blue ‘+’ block inserter button at the top of the page, and then drag the Navigation block onto the page.

Add the Navigation Block to Your Post or Page

Next, you need to choose which menu will be displayed. Simply click the ‘Select Menu’ button on the toolbar and select the desired menu.

Finally, you need to look at the block’s settings in the left hand pane. There you will find two buttons for the menu’s orientation. You will need to click the down arrow button to orient the menu vertically.

Change Your Navigation Menu Block to a Vertical Orientation

The new full site editor allows you to customize your WordPress themes using the block editor. It was released in WordPress 5.9, and it enables you to add different blocks to your templates to create a unique design.

However, the full site editor is still in beta and limited to specific themes that support it, such as the default Twenty Twenty-Two theme. For more details, you can see our article on the best WordPress full site editing themes.

To add a navigational menu using the full site editor, you need to go to Appearance » Editor from your WordPress dashboard. Once you’re in the editor, go ahead and click on the navigational menu that appears at the top of the website header.

Next, you’ll need to click on the ‘Select Navigation’ button on the toolbar.

Click the 'Select Navigation' Menu on the Toolbar

Now you’ll see different options to customize the navigational menu on the panel on the right. One of those options is whether to display the menu with a horizontal or vertical orientation.

Simply click the Down arrow for vertical orientation to create a vertical menu.

For more information, see our guide on how to add a navigation menu in WordPress

SeedProd is the best WordPress page builder and custom theme builder plugin on the market. It allows you to easily create vertical menus anywhere on your WordPress website.

The first thing you need to do is install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd that will allow you to add a vertical navigation menu to individual pages. But you will need the Pro version to access the theme builder and add a menu to your theme’s templates.

Upon activation, you need to enter your license key. You can find this information under your account on the SeedProd website.

After that, you need to use SeedProd to create a custom WordPress theme.

Creating a Custom WordPress Theme

You’ll find the SeedProd theme builder by navigating to the SeedProd » Theme Builder page. Here, you’ll use one of SeedProd’s ready-made themes as a starting point. This will replace your existing WordPress theme with a new, custom design.

You can do that by clicking the ‘Themes’ button.

You will be shown a list of professionally designed themes for different types of websites. For example, there are templates called ‘Modern Business’, ‘Marketing Agency’, and ‘Mortgage Broker Theme’.

Take a look through the options and select one that best matches your needs by clicking the checkmark icon.

Once you have chosen a theme, SeedProd will generate all the theme templates you need. You can learn how to customize these templates in our guide on how to easily create a custom WordPress theme.

Adding a Vertical Navigation Menu to Your Site’s Templates

Now you can use SeedProd to add a vertical navigation menu to any of your theme templates. In this tutorial, we’ll add a menu to the blog index template.

You need to hover your mouse over that template, and then click the ‘Edit Design’ link.

This will open SeedProd’s drag and drop page builder. You’ll see a preview of your website on the right, and a collection of blocks you can add to your site on the left.

You need to scroll down the blocks until you come to the Advanced section.

Once you locate the Nav Menu block you should drag it onto your sidebar or anywhere that you want to display the navigation menu. By default, there is only one item in the menu, ‘About’.

Now you will need to change the menu’s settings. To do that, you need to click on the menu and the available options will be displayed in a pane on the left of the page.

Currently, the ‘Simple’ menu type is selected. This allows you to build your own navigation menu in SeedProd.

However, for this tutorial, we’ll click the ‘WordPress Menu’ type to use the WordPress navigation menu instead.

Finally, you need to click on the ‘Advanced’ tab. Here you’ll find an option to orient the list layout vertically or horizontally.

When you click on the ‘Vertical’ button you’ll notice the preview immediately change to a vertical navigation menu.

Don’t forget to click the ‘Save’ button at the top of the screen to store your vertical menu.

It can be difficult to tap on a standard menu while using the small screen of a smartphone. That’s why we recommend that you preview the mobile version of your WordPress site to see how your website looks on mobile devices.

Vertical menus are much easier to navigate, especially when you use a fullscreen responsive menu that will automatically adjust to different screen sizes.

To learn how to make your navigation menu easier to use on mobile devices, see our guide on how to add a fullscreen responsive menu in WordPress.

A dropdown menu looks like a normal horizontal navigation menu at the top of the screen, but when you hover your mouse over one of the items, a vertical submenu is displayed.

If you have a website with a lot of content, then a dropdown menu allows you to organize the menu structure by topics or hierarchy. This will show more content in a limited space.

To display a dropdown navigation menu on your website, you will need to choose a theme with dropdown menu support. After that, you need to create the navigation menu, and then add sub-items to some of the menu entries.

You can learn how to do that step by step in our beginner’s guide on how to create a dropdown menu in WordPress.

A mega menu lists multiple menus vertically across the page. They’re similar to dropdown menus, except all of the submenus are displayed at once, allowing users to quickly and easily find your very best content.

Mega menus are highly engaging and interactive because they combine the best of horizontal and vertical menus to show a helpful overview of your website’s contents on a single screen.

We recently added a mega menu to WPBeginner to improve content discoverability. We explain how we did this in our behind the scenes look at our new site design.

You can learn more in our guide on how to add a mega menu to your WordPress site.

We hope this tutorial helped you learn how to create a vertical navigation menu in WordPress. You may also want to learn how to start your own podcast, or check out our expert comparison of the best domain registrars.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Vertical Navigation Menu in WordPress first appeared on WPBeginner.

October 5, 2020

How to Create a Sticky Floating Navigation Menu in WordPress

Recently, one of our users asked us how to create a sticky navigation menu for their site?

Sticky navigation menus stay on the screen as users scroll down the page. This makes the top menu always visible, which is good for user experience because it contains links to the most important sections of your website.

In this article, we’ll show you how to easily create a sticky floating navigation menu in WordPress.

What is a Sticky Floating Navigation Menu?

A sticky or floating navigation menu is one that ‘sticks’ to the top of the screen as a user scrolls down. This makes your menu visible to users at all times.

Here’s a sticky menu in action. We’re going to show you how to create a menu exactly like this for your own site:

Why and when sticky menus can be useful?

Usually, the top navigation menu contains links to the most important sections of a website. A floating menu makes those links always visible, which saves users from scrolling back to the top. It is also proven to increase conversions.

If you run an online store, then your top navigation menu likely include links to the cart, product categories, and product search. Making this menu sticky, can help you reduce cart abandonment and increase sales.

Some of the best WordPress themes have built-in support for a sticky navigation menu. Simply see your theme settings under Themes » Customize to enable this feature.

If your theme does not have this option, then keep reading, and we’ll show you how to easily create a sticky floating navigation menu in any WordPress theme or WooCommerce store.

Method 1: Add Your Sticky Floating Navigation Menu Using a Plugin

This is the easiest method. We recommend it for all WordPress users, particularly for beginners.

If you haven’t set up your navigation menu yet, go ahead and do that using our instructions on how to add a navigation menu in WordPress.

After that, you need to install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Sticky Menu (or Anything!) page to configure the plugin settings.

First you need to enter the CSS ID of the navigation menu that you want to make sticky.

You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and take your mouse to the navigation menu. After that, you need to right-click and select Inspect from your browser’s menu.

This will split your browser screen, and you will be able to see the source code for your navigation menu.

You need to find a line of code that relates to your navigation, or your site header. It will look something like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

If you’re struggling to find it, bring your mouse cursor over the different lines of code in the Inspect pane. The navigation menu will be fully highlighted when you have the right line of code:

In this case, our navigation menu’s CSS ID is site-navigation.

All you need to do is enter your menu’s CSS ID in the plugin settings with a hash at the start. In this case, that’s #site-navigation.

Don’t forget to click the ‘Save Changes’ button at the bottom of the page.

Now, go ahead and check out your sticky menu live on your WordPress website. It should stay on the page as you scroll down, like this:

The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You only need to use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

We recommend leaving the box checked next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar, which is only visible to logged-in users.

Here, you can see that the admin bar on our test site is correctly displaying above the sticky menu:

The next option allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device:

You can test how your site looks on mobile devices or tablets. If you don’t like how it looks, simply add 780px for this option.

Don’t forget to click on the Save Changes button after making any changes to your options.

Method 2: Manually Add a Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. We don’t recommend it for beginners.

We also recommend that you take a look at our guide on how to easily add custom CSS to your WordPress site before you begin.

First, you need to visit Appearance » Customize to launch the WordPress theme customizer.

Next, click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Note: This will produce a navigation menu with a black background. If you want a different color, change the number next to background. For example, using background: #ffffff will give you a white menu background.

Just replace #site-navigation with the CSS ID of your navigation menu then click on the Publish button at the top of the screen.

Go ahead and visit your website to see your sticky floating navigation menu in action:

What if your navigation menu normally appears below the site header instead of above it? If so, this CSS code could overlap the site title and header or appear too close to it before the user scrolls:

This can be easily adjusted by adding a margin to your header area using some additional CSS code:

.site-branding {
margin-top:60px !important;
}

Replace site-branding with the CSS class of your header area. Now, the sticky navigation menu will no longer overlap your header before the user scrolls down:

We hope this article helped you add a sticky floating navigation menu to your WordPress site. You may also want to see our guide on how to create a custom WordPress theme without writing any code, and our comparison of the best WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.

April 14, 2020

How to Add Navigation Menu in WordPress (Beginner’s Guide)

Do you want to add a navigation menu to your WordPress site?

WordPress comes with a drag and drop menu interface that you can use to create header menus, menus with dropdown options, and more.

In this step by step guide, we will show you how to easily add a navigation menu in WordPress.

What is a Navigation Menu?

A navigation menu is a list of a links pointing to important areas of a website. They are usually presented as a horizontal bar of links at the top of every page on a website.

Navigation menus give your site structure and help visitors find what they’re looking for. Here’s how the navigation menu looks on WPBeginner:

WordPress makes it really easy to add menus and sub-menus. You can add links to your most important pages, categories or topics, blog posts, and even custom links such as your social media profile.

The exact location of your menu will depend on your WordPress theme. Most themes will have several options, so you can create different menus that can be displayed in different places.

For instance, most WordPress themes come with a primary menu that appears on the top. Some themes may include a secondary menu, a footer menu, or a mobile navigation menu as well.

Creating Your First Custom Navigation Menu

To create a navigation menu, you need to visit the Appearance » Menus page in your WordPress admin dashboard.

First, you need to provide a name for your menu, like ‘Top Navigation Menu’ and then click the ‘Create Menu’ button. This will expand the menu area, and it will look like this:

Next, you can choose the pages you want to add to the menu. You can either automatically add all new top-level pages, or you can select specific pages from the left column.

First, click the ‘View All’ tab to see all your site’s pages. After that click the box next to each of the pages you want to add to your menu, and then click on the ‘Add to Menu’ button.

Once your pages have been added, you can move them around by dragging and dropping them.

Note: All menus have their items listed in a vertical (top to bottom) list in the menu editor. When you put the menu live on your site, it’ll either display vertically or horizontally (left to right), depending on the location you select.

Most themes have several different locations where you can put menus. In this example, we’re using the default 2020 theme, which has 5 different locations.

After adding pages to the menu, select the location where you want to display the menu and click on the ‘Save Menu’ button.

Tip: If you’re not sure where each location is, try saving the menu in different places, then visiting your site to see how it looks. You probably won’t want to use all the locations, but you might want to use more than one.

Here’s our finished menu on the site:

Creating Drop-Down Menus in WordPress

Drop-down menus, sometimes called nested menus, are navigation menus with parent and child menu items. When you run your cursor over a parent item, all the child items will appear beneath it in a sub-menu.

To create a sub menu, drag an item below the parent item, and then drag it slightly to the right. We’ve done that with 3 sub-items beneath ‘Services’ in our menu:

Here’s the sub-menu live on the site:

You can even add multiple layers of dropdown, so that your sub menu can have a sub menu. This can end up looking at bit cluttered, and many themes do not support multi-layer drop-down menus.

In this example, you can see that ‘Logo Design’ (a child item of ‘Services’) has two child items of its own.

Adding Categories to WordPress Menus

If you’re using WordPress to run a blog, then you may want to add your blog categories as a drop-down in your WordPress menu. We do this on WPBeginner:

You can easily add categories to your menu by clicking the Categories tab on the left side of the Menus screen. You may also need to click the ‘View All’ tab to see all your categories.

Simply select the categories you want to add to the menu, and then click the ‘Add to Menu’ button.

The categories will appear as regular menu items at the bottom of your menu. You can drag and drop them into position. We’re going to put all of these categories under the Blog menu item.

Do you want to have a blog page on your site that’s separate from your homepage? If so, check out our tutorial on how to create a separate page for blog posts in WordPress.

Adding Custom Links to Your WordPress Navigation Menus

Aside from categories and pages, WordPress also makes it super easy to add custom links to your menu. You can use it to link to your social media profiles, your online store, and / or other websites that you own.

You will need to use the ‘Custom Links’ tab on the Menu screen. Simply add the link along with the text you want to use in your menu.

You can even get creative and add social media icons in your menu.

Editing or Removing a Menu Item in WordPress Navigation Menus

When you add pages or categories to your custom navigation menu, WordPress uses the page title or category name as the link text. You can change this if you want.

Any menu item can be edited by clicking on the downward arrow next to it.

You can change the name of the menu item here. This is also where you can click ‘Remove’ to take the link off your menu altogether.

If you’re struggling with the drag and drop interface, then you can also move the menu item around by clicking the appropriate ‘Move’ link.

Adding WordPress Menus in Sidebars and Footers

You don’t have to just stick to the display locations for your theme. You can add navigation menus in any area that uses widgets, like your sidebar or footer.

Simply go to Appearance » Widgets and add the ‘Navigation Menu’ widget to your sidebar. Next, add a title for the widget and choose the correct menu from the ‘Select Menu’ drop down list.

Here’s an example of a custom WordPress footer menu built on Syed Balkhi website.

Going Further with Navigation Menus

If you want to create a truly epic menu with loads of links, we’ve got a tutorial on how to create a mega menu in WordPress. This lets you create a drop-down with lots of items including images.

Mega menus are a great option if you have a large site, like an online store or news site. This type of menu is used by sites like Reuters, Buzzfeed, Starbucks, etc.

We hope this article helped you learn how to add a navigation menu in WordPress. You may also want to check out our guides on how to style navigation menus in WordPress and how to create a sticky floating navigation menu in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Navigation Menu in WordPress (Beginner’s Guide) appeared first on WPBeginner.

What Is a Navigation Menu?

Try Different Menu Display Locations

Adding a Vertical Navigation Menu to the Sidebar

Creating a Vertical Navigation Menu on a Post or Page

Adding a Vertical Navigation Menu Using the Full Site Editor

Creating a Vertical Navigation Menu using a Theme Builder Plugin

Creating a Responsive Vertical Navigation Menu for Mobile Devices

Creating a Drop Down Menu in WordPress

Creating a Mega Menu in WordPress

What is a Sticky Floating Navigation Menu?

Method 1: Add Your Sticky Floating Navigation Menu Using a Plugin

Method 2: Manually Add a Sticky Floating Navigation Menu

What is a Navigation Menu?

Creating Your First Custom Navigation Menu

Creating Drop-Down Menus in WordPress

Adding Categories to WordPress Menus

Adding Custom Links to Your WordPress Navigation Menus

Editing or Removing a Menu Item in WordPress Navigation Menus

Adding WordPress Menus in Sidebars and Footers

Going Further with Navigation Menus