Magento Responsive Navigation 101 – Do’s and Dont’s

Share On Facebook
Share On Twitter
Share On Linkedin

Responsive Design is extremely popular method for building websites. As mobile web browsing skyrockets, designers and developers have come up with the best ways to give website visitors the best experience by simply and easily finding what they are looking for.

For Magento store owners and operators, navigation is essential because your navigation is the way in which your customers will most likely get from your website’s homepage to the product that they wish to purchase. You have probably put a lot of time and research into finding the best way to organize your products into categories and subcategories, and how to arrange your site’s navigation so that every single product can be easily found, and that your customers also have the option of browsing any category whether broad or narrow.

Since you already know how important this organizational navigation is, choosing to build a Magento website to be responsive can be an intimidating endeavor. Your investment time and price will increase, but your choice could pay off big time if you know you have a large customer base that is using mobile devices, and you want to make it as easy as possible for them to purchase your product with their iPhone, iPad, or any Android device.

Quite possibly the biggest decision you could make for your responsive Magento store is choosing a theme that fits your needs. There are many options out there for responsive Magento themes, and some of them do a great job with the navigation. Remember that you have options when it comes to a responsive navigation, and the decision you make should be based on a design preference, but should also be based on the nature of your navigation and how extensive it is. Something that might look great for five menu items will not work if you have dozens of subcategories that require a mega drop down menu.

The theory behind a successful responsive navigation is simple. Your customers need to know exactly where to find your navigation and exactly where to find it. While this is generally the rule of thumb for any element of any website on any platform, it is much easier said than done when it comes to responsive navigation. Below, you will find examples of responsive design that display the options available and I will explain which navigations would work best for different website needs.

Things to know about responsive navigations:

    1. Apple says that a 44px by 44px square area is required for an iOS device to register a touch, so make sure your navigation utilizes a touchable area that is at least this size, but should be even larger.
    2. Touchscreen devices do NOT have hover-state capability. Most desktop navigations will activate a dropdown on a hover state, but responsive navigations can’t do that, so make sure your’s doesn’t.
    3. You don’t need to sacrifice content. You can and should keep your navigation consistent with your desktop site.
    4. Understand global symbols. The “hamburger” icon is understood to denote a menu, although writing it out really can’t hurt. You might also want to use the “home” , “search” , or  “login/customer account” symbols.

Keeping it simple:

These options will work for a navigation that only has a few links, and would work for a navigation that does not require a dropdown or mega-dropdown structure.

Personally, I love these options. They are extremely simple and couldn’t be easier to use. These navigations keep all of the information in place. They are direct links that eliminate the drop down, so if you are only selling a few categories of items and are looking to keep it simple, these are the navigations for you.

1. Simple Grid – condenses your navigation to a simple grid. Super easy and straightforward!


2. Simple Condense – Takes your navigation and simply condenses it for a mobile device. Added padding ensures a bigger touchable area.

3. Click & Expand

If you need help with your Magento store, call 845-656-3000 or Contact us here »

More complicated navigations

When a dropdown or mega-dropdown is required.

1. Expandable Dropdown – Similar to the click and expand menu, but with expandable links that act as a dropdown.

2. Off – canvas menu. This is a popular option that is used by websites like Facebook and YouTube. This navigation isn’t on the main page, so it doesn’t detract from any much-needed space on a mobile device.

Theme Options

If you choose a responsive theme that you like, you probably won’t have many options in terms of a navigation. Because most Magento sites nowadays require extensive drop down menus, your theme will most likely accomodate this with a more advanced responsive navigation.It is absolutely imperative that you test your theme on your desktop computer, on an iPad, on an iPhone, and also on an Android tablet, phone, and anything else you can get your hands on. Problems with responsive design are costly to address because they are often extremely complicated for your designer and developer. For this reason, you should also be completely confident that your developer has had prior experience with responsive design and knows how to troubleshoot any common problems. Don’t assume that just because responsive design is so popular that it is easy.

In Conclusion

The options illustrated above aim to give you a good idea of the most popular solutions for responsive navigation. If you have a simple product catalog with limited options, keep your responsive navigation simple with large clickable areas. Leave out the drop down. With more products comes the need for more organization. You can still keep your navigation easy to use while ensuring that it is mobile device friendly. Remember to test your navigation every step of the way on multiple devices. Ask your developer to optimize your navigation’s performance by avoiding the use of images and over complicated methods.

Rate this post