SwissUpLabs Logo

Link Bar - Alternative Mobile Navigation

As you probably know, Magento hides default navigation menu on mobile devices and shows the “hamburger menu” instead.

The problem is many clients do not use this icon, because they simply don’t know that they will find the navigation behind it. This results in decreased category page views, which is obviously not good.

You can read more about “hamburger menu” troubles and possible solution in this great article by growthrock.co.

Let’s create a “LinkBar” menu for mobile devices with top category links and show it under the header:

Result

Proceed with the following steps:

  1. Navigate to Swissup > NavigationPro page and press Add New Menu button
  2. Create “LinkBar” menu using “Empty Menu” type. Do not fill the “Replace Top Menu at” field.
  3. Import your store category tree using Import Item button
  4. Press Menu Settings and change the following values:

    Option Value
    Maximal Depth 1
    CSS Class navpro-linkbar navpro-nowrap md-hide lg-hide

    If you would like to show all categories without “More” button, remove navpro-nowrap class. In this case we recommend to add navpro-pills class.

  5. Navigate to Content > Widgets page and press Add Widget button
  6. Create “Navigationpro” widget and assign it you your active theme. Press Continue
  7. Fill the form as follows:

    Storefront properties tab

    Option Value
    Widget Title Navigationpro LinkBar
    Assign to Store Views All store views
    Layout updates  
    Display on Specified Page
    Page CMS Home Page
    Container After Page Header Top

    Widget Options tab

    Option Value
    Menu LinkBar

    Save the widget.

  8. That’s all. Navigate to your store homepage from mobile device and check your new “LinkBar” navigation.

Additional styles

You can also combine this menu with other NavigationPro features. For example, if you have a nice icons for all of your categories, you can try to use iconic menu and category tips:

LinkBar with Icons

Next up

Edit this Page