Hosting Tutorial & Guide

Top 3 WordPress Navigation Menu Tips and Tricks to Make the Menu You Want Most

updated on May 26, 2017
Top 3 WordPress Navigation Menu Tips and Tricks to Make the Menu You Want Most Formerly we offered a detailed tutorial about creating WordPress navigation menus and making simple customizations to them. While creating your own custom navigation menu, however, there is much more freedom for you to make it perfect for your needs.

To help you create better navigation menus for your WordPress site, we will introduce some tips and tricks which are quite useful. These include making a navigation menu sticky, adding image icons to menu links, and opening links in new window. If you are seeking a solution to any of these issues, simply jump to the content you need.

Make a Sticky Navigation Menu in WordPress

Using a sticky navigation menu makes sure that your visitors can always get the easiest way to access the most important content on your website. When they scroll to the bottom of any page, they don't need to scroll back to the top to see your menu items. In this way, you will be able to increase your page views and reduce the bounce rate.

Some WordPress themes are built with the possibility to create sticky navigation menus. But if your theme doesn't include this feature, you can also achieve the goal easily by adding additional CSS or using a plugin.

For most beginners who don't want to touch the code, a plugin named Sticky Menu (or Anything) on Scroll can help. After installing the plugin, you need to access it in Settings > Sticky Menu (or Anything). Under the "Basic settings" tab on the settings page, you first need to enter the CSS ID of the navigation menu that you want to make sticky.

Assumed that the menu you need to change is the active one on your site, you should now visit your site, move your mouse to the navigation menu, right click, and select "Inspect". In the source code, you will be able to find the ID of your main menu.

Navigation Menu ID

In the example above, the ID of the navigation menu is "menu-buddypress". In this case, you should enter "#menu-buddypress" as the sticky element in the plugin settings.

Sticky Element

Next, you can decide whether to stick the navigation menu on smaller screens. We'd suggest you turn it off for mobile devices for the sake of the user experience. To do this, add 700 or a larger number for the pixels.

Sticky Navigation Settings

For the other options, simply leave them to the default value. And then, save the settings. When you visit your website again, you will find that the navigation menu floats when your scroll the page down.

Make Navigation Menu Sticky

Add Icons to the Links in Your Navigation Menu

Sometimes plain texts are boring because people nowadays prefer visual content. This case is also true with the navigation menus. To add some fun to the links in your menus, you can place icons next to them just like many popular websites are doing now.

An easy solution is the lightweight Menu Image plugin which is exactly designed for adding images to menu items. Upon activation, you can go Appearance > Menus. Opening a navigation menu and expanding any menu item, you will see a menu image option with a "Set image" button.

Menu Image

Clicking on the button, you will open the media uploader where you are able to upload the icon images that you are going to use. Just upload an image and select it. For this image, you can choose the proper image size that fits your site design best, and decide the title position – above, below, before or after the icon image. "After" is the most common choice.

Set Menu Icon

After saving the menu, you will see the icons placed next to the texts in your navigation menu. No other additional setting is needed.

Menu with Icons

Open Your Navigation Menu Link in a New Window

By default, the links in your navigation menu are not opened in a new window. However, in some cases, you will want the other way, especially when some of the links in the menu are linked to external resources.

Unlike the other tricks, opening navigation menu links in new windows doesn't require the installation of any plugin because WordPress already comes with such a feature. To access this feature, click on "Screen Options" when editing a navigation menu, and check the option of "Link Target".

Link Target

Now edit a menu item, and you will find an "Open link in a new tab" option is available for you. For those menu items that you want to open in a new window, simply edit them one by one and get this option checked. At last, save the menu.

Open Link in New Window

Final Thought

In fact, in addition to the tips and tricks introduced above, there are a lot of other possibilities to customize the navigation menu on a WordPress site. Most of the customization options are available in plugins, but if you want to build a complicated menu with full control, it is still necessary to learn some CSS skills.