navigation menus | The Blog Pros

July 27, 2022

How to Add Conditional Logic to Menus in WordPress

Do you want to show different navigation menu items for different pages in WordPress? Or display a different menu for logged in users?

WordPress allows you to show a navigation menu in a specific location in your theme, but by default, it will always show the same menu.

In this article, we will show you how to add conditional logic to menus in WordPress.

Why Add Conditional Logic to Menus in WordPress?

Navigation menus give your WordPress website structure and help visitors find what they’re looking for. By default, your WordPress website will display the same navigation menu to all users and on all posts and pages.

However, there may be times when you wish to display different menus to different users, or on different pages on your website.

Websites like an online store, a WordPress membership site community, or an online learning platform can all benefit from personalized navigation menus.

Using conditional logic, you could add extra menu items for logged in users so they can manage their accounts, renew their subscriptions, or view the online courses they purchased. You can think of it as WordPress menu access control.

With that being said, let’s take a look at how to add conditional logic to menus in WordPress. Here are the topics we’ll cover in this tutorial:

Creating New Navigation Menus in WordPress
Showing a Different Menu to Logged In Users in WordPress
Showing a Different WordPress Menu Depending on User Role
Showing a Different Menu for Different Pages in WordPress
Hiding the Navigation Menu on Landing Pages in WordPress
Doing More With WordPress Navigation Menus

The first step is to create the additional navigation menus you wish to display in WordPress. After that, you can use conditional logic to decide when each menu will be displayed.

Simply head over to the Appearance » Menus page in the WordPress dashboard. If you already have a navigation menu that you use on your website for all users, then this can be your default menu.

Next, you need to click the ‘create a new menu’ link to create a new menu. For example, you could create one menu to show to logged in users, and another to display on a certain WordPress page or category.

On the left-hand side of the screen, you can see a list of your website pages. Simply check the box next to any page you want to add to your menu and click the ‘Add to Menu’ button.

You can also drag and drop the menu items on the right side of the screen to rearrange them.

Further down the page, you can choose a location to display your menu. But, you don’t need to assign a location to this menu now. We’ll do that in the next step.

Don’t forget to click on the ‘Save Menu’ button to store your changes.

For more details on creating menus, you can take a look at our beginner’s guide on how to add a navigation menu in WordPress.

It’s often useful to display different navigation menus to users depending on whether they have logged in to your site or not.

For example, you can include login and registration links for logged out users and add a logout link to your menu for your logged in menu.

Or if you are running a WooCommerce store, then you could include items for your customers that are hidden from the general public.

First, you need to install and activate the Conditional Menus plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Appearance » Menus page and switch to the ‘Manage Locations’ tab.

From here, you will see the list of available menu locations and the menus that are currently displayed. These will vary depending on the WordPress theme you are using.

For example, on our demo website, it is showing that our Primary Menu location is showing a navigation menu titled ‘Main Menu’.

We can tell the plugin to show a different menu when a certain condition is matched by clicking on the ‘+ Conditional Menu’ link and selecting another menu from the drop down menu. For this tutorial, we’ll select ‘Logged in Menu’.

Next, you need to click on the ‘+ Conditions’ link.

This will bring up a popup where you’ll see a bunch of conditions to choose from.

Simply check the box next to the ‘User logged in’ option, and then click on the ‘Save’ button.

You can now visit your website to see the logged in user menu in action. You can log out of your website to see the navigation menu that is shown to all other users.

For more detailed instructions and to learn how to do this using code, take a look at our guide on how to show different menus to logged in users in WordPress.

Once a user has logged in, you can also display a different navigation menu depending on the user role you have assigned to them.

For example, you could include extra menu items for an administrator and more limited items for a contributor. Or on a membership site, you could grant different levels of access to different membership levels.

As in the previous section, you need to install and activate the Conditional Menus plugin, then visit the Appearance » Menus page and switch to the ‘Manage Locations’ tab.

You should add the appropriate conditional menu for the user role you will select. For this tutorial, we’ve selected the ‘Nav Menu Administrator’ menu.

After that, you need to click the ‘+ Conditions’ link so you can choose the user role.

Select the Roles That Should See the Menu

You will need to click on the ‘User Roles’ tab to see checkboxes for each user role on your website. Simply click the user roles that will see this menu, and then click the ‘Save’ button.

You can display a different menu for different pages in WordPress. For example, you could display extra menu items on your privacy policy page, such as a link to your cookie notice.

To do this, you need to install and activate the Conditional Menus plugin, as shown above, then choose the appropriate navigation menu and click the ‘+ Conditions’ link.

This time you should click the ‘Pages’ tab. You will see a list of every page on your website.

Select the Pages Where the Menu Should Be Displayed

You need to place a checkmark next to each page where you wish to display the navigation menu, then click the ‘Save’ button.

There may be pages on your website where you don’t want to display a navigation menu at all, such as your landing pages.

A landing page is designed to increase sales or generate leads for a business. On these pages, you will want to minimize distractions and provide users with all the information they need to take a specific action.

In our guide on how to increase your landing page conversions by 300%, we suggest that you can minimize distractions by removing navigation menus and other links from the page.

You can do that using the Conditional Menus plugin. When selecting the conditional menu, this time you need to choose ‘Disable Menu’ from the drop down menu.

Next, you need to click the ‘+ Conditions’ link to choose when to display the menu.

You should click on the ‘Pages’ tab and place checkmarks next to your landing pages.

Select the Pages Where the Navigation Menu Should Be Hidden

Don’t forget to click the ‘Save’ button to store your settings.

Navigation menus are a powerful web design tool. They allow you to point users to the most important sections of your website.

Now that you are showing different navigation menus on different pages and for different users, you may be wondering how you can customize them further.

Try these useful tutorials to extend the functionality of the navigation menus on your WordPress website.

We hope this tutorial helped you learn how to add conditional logic to menus in WordPress. You may also want to learn how to create automated workflows, or check out our list of the best social proof plugins for WordPress and WooCommerce.

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 Conditional Logic to Menus 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.

Category: navigation menus

How to Add Title Attribute in WordPress Navigation Menus

Why Add Title Attributes to Navigation Menu Items?

Adding a Title Attribute to Classic Theme Menu Items

Adding a Title Attribute to Block Theme Menu Items

Expert Guides for Customizing WordPress Navigation Menus

How to Add Conditional Logic to Menus in WordPress

Why Add Conditional Logic to Menus in WordPress?

Creating New Navigation Menus in WordPress

Showing a Different Menu to Logged In Users in WordPress

Showing a Different WordPress Menu Depending on User Role

Showing a Different Menu for Different Pages in WordPress

Hiding the Navigation Menu on Landing Pages in WordPress

Doing More With WordPress Navigation Menus

How to Create a Sticky Floating Navigation 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