Optimize WordPress SlickNav

How to Optimize WordPress Menus for Mobile Users with SlickNav

Menus are a navigational tool that helps visitors find what they are looking for in a timely manner. While most websites are naturally responsive nowadays, sometimes you may need to go a bit further to help mobile users. And the SlickNav plugin is perfect for the job.

With it, you can build highly customizable mobile-friendly menus in minutes. These not only help ensure that your website is easy to navigate, but they also help it look good. There are even options to add your logo to the menus to improve branding.

Today, I will demonstrate how to create a stylish SlickNav menu in WordPress.

Why A Mobile Navigational Menu Matters

As of May 2021, mobile traffic makes up 55.31% of all internet traffic and is continuing to grow year over year. Thus, ensuring your website is ready for mobile visitors is essential.

One of the biggest problems mobile users face on a website is the menu. Let’s face it, sometimes they are just not sized properly for mobile devices, and that makes it difficult to navigate the website. Customizing your menus for mobile users is a great way to improve the experience.

And since menus are interacted with by almost all users, it’s a great marketing area.

One of the biggest mistakes new website developers make is not branding their content. The power of branding is how large companies stay dominant, and adding your logo to the menu is one way to do it. It helps build brand recognition and can show off your creative side in one swoop.

Customizing the menus is one of the first steps to achieve a mobile-friendly WordPress site.

How to Customize WordPress Menus with SlickNav

Step 1: Install SlickNav

The SlickNav Mobile Menu plugin is a very simple customization tool for WordPress menus. With it, you can fully customize the appearance of the menu, create submenus,  and even add a search field. And most importantly, it’s easy to use.

In just a few minutes, you’ll have a fully functioning WordPress menu that’s ready to impress visitors.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for SlickNav Mobile Menu in the available search box. This will pull up additional plugins that you may find helpful.

SlickNav Mobile Menu

Scroll down until you find the SlickNav Mobile Menu plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Locate the Menu CSS Class or Menu ID

Before you get started with the actual customization process, you are going to need a specific piece of information to tell SlickNav what menu you want to edit. The plugin allows you to use either the Menu CSS Class or the Menu ID.

The easiest one to obtain is the Menu ID, which I will now outline.

Click on Appearance and select the Menus option.

Menus

At the top, use the drop-down to select which menu you want to edit. Click on the “Select” button.

Select

Look at the URL on the page, the last number is the Menu ID. Copy it for the next step.

Menu ID

If you want to edit multiple menus, repeat this process to obtain the necessary Menu IDs.

Before moving on, it’s important to understand that the plugin customization page only changes the appearance of the menu. To actually add new items to it, you will need to use the Menus area of WordPress.

Step 3: Customize the Menu

With the Menu ID ready to go, you can now start customizing. The process is very straightforward, but unfortunately, the plugin lacks a preview option. Thus, the only way to actually see it is after you click the “Update” button.

The only issue is that it will be on your live website, so it’s not recommended to go one change at a time. Instead, I’d recommend going through the settings then see what the finished product looks like. Afterward, you can go back and make edits.

If your website is busy, I’d recommend doing this during the off-hours.

To begin, click on Settings and select the SlickNav Menu option.

SlickNav Menu

First, paste the Menu ID into the first textbox. If you have multiple menus, you can separate them with a comma, but keep in mind they will all look the same. Though, this is a great way to keep everything consistent on your website.

Paste ID

The settings list is pretty comprehensive, so I will cover the key features. That said, I strongly encourage you to edit each setting as necessary to get the best results.

Use the Image Logo option to upload a picture of your website’s logo. The plugin recommends the image to be 45px in-depth and up to 200px in width.

Below this, you will find options for the logo alt text, so make sure to fill it in.

Menu Logo

You can customize what the search field will say with the Search Label Name option.

Search Field

Choose which animation library to use. jquery or velocity. If you’re unfamiliar with these,  jquery is very common and works perfectly on just about every site. Velocity uses the same jquery API, but it is significantly faster.

Animation Library

Once you have gone through all of the settings and are completely satisfied, click on the “Update” button.

Update

The changes will now be applied to the menus on your website, which you can now view. If you are unhappy with the appearance, you can go back to the settings page and make adjustments.

Congratulations on making mobile-friendly menus with SlickNav.

Make Your Entire Website Mobile-Friendly

Creating a mobile nav menu in WordPress is only one aspect of running a mobile-friendly site.

For instance, have you ever thought about how close together some buttons are? Probably not, but you should. This can be a nightmare for mobile users with larger fingers.

The end result is them accidentally clicking the wrong button, and it’s a surefire way to get them to leave.

Even if your buttons are responsive, placing them very close together defeats the purpose.

Another thing to consider is if your sidebar should be visible on mobile. The screen is quite small, thus, forcing visitors to have a sidebar present can eat up screen space. It can even lead to some awkward-looking pages and posts.

The bottom line is that just relying on responsive design is not enough. You have to consider some of the smaller details and how they fit into the overall mobile experience.

Help Visitors Find Your Content

Getting visitors onto your posts and pages is hard enough. And making the most out of those visits separates the successful websites from the failures.

Menus play an instrumental part in that first impression.

Customers want to find what they are looking for in seconds, and that’s what navigational menus are designed for. Thus, they need to be a priority in creating an easy-to-navigate website. It’s one of the biggest problems with new websites, and many developers often forget about mobile users.

Using responsive tools is great, but they are just not enough sometimes. Instead, you need to manually edit and customize certain elements for the best experience.

Do you think the default WordPress navigation menu looks good on a mobile device? Did you find the customization options easy to use?

Author: Robert Giaquinto

Robert has been writing tutorials about WordPress and other CMS for over 3 years since joining the GreenGeeks marketing team. Thanks to this, he has had the opportunity to research and master several areas of WordPress including plugin usage, SEO, website design, and social media integration. When he is not creating content for WordPress, Robert is digging up new content ideas for environmental pieces. These range from the pollution in our air to the danger’s wildlife face. And with a bachelor’s degree in electrical engineering, he is always eager to discuss the way our technologies are affecting the environment, especially when it comes to solar energy.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.