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. And if you want to simplify your business you may need custom software development from Ukraine.
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.
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.
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.
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.
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.
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.
After saving the menu, you will see the icons placed next to the texts in your navigation menu. No other additional setting is needed.
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".
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.
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.