Upgrade Your Shopify Boundless Theme Menu: Fix Navigation & Dropdowns

Boundless is a popular free theme on Shopify known for its photography-first aesthetic. However, many merchants find the default navigation menu to be too "bare-bones."

Out of the box, the menu lacks hover dropdown functionality, and the contextual sub-menus only appear on specific collection pages. This limits how easily customers can navigate your store. While you could hire a developer to build a custom mega-menu, there is a happy medium that improves functionality without the high cost.

In this tutorial, I will walk you through how to:

• Add visual feedback (hover effects) to your menu items.
• Enable contextual sub-menus directly on the homepage.
• Improve site navigation without using slow, expensive apps.

Prerequisites: Backup Your Theme

Before modifying any code, always backup your theme. This ensures you have a restore point if you make a mistake.

1. Go to your Shopify Admin > Online Store.
2. Click Actions next to your active theme.
3. Select Duplicate.

Step 1: Open the Code Editor

Once your backup is complete:

1. Click Actions > Edit code.
2. Locate and open the following two files from the file tree on the left:
   • Sections folder: action-bar.liquid
   • Assets folder: theme.js.liquid

Step 2: Modify the JavaScript Logic

We need to disable the default behavior that prevents the sub-menu from opening on the homepage.

1. Open the theme.js.liquid file.
2. Search for the function openSubNavFromNavItem. In many versions of Boundless, this is located around line 1153.
3. Comment out this line of code by adding double slashes (//) to the beginning of the line.

The code should look similar to this:

// openSubNavFromNavItem.bind(this);

By commenting this out, we stop the theme from using its default, restrictive navigation handler.

Step 3: Add Custom Styles and Scripts

Now we will inject new logic to handle the menus, allowing them to pop up and down smoothly on any page.

1. Navigate to the action-bar.liquid file.
2. You will need to paste the custom Script and Style tags (containing the CSS for hover effects and JS for the menu behavior) into this file.

Note: Ensure you copy the full code snippet provided in the resources for this solution. This code replaces the logic we disabled in Step 2, adding the visual cues and the "pop-up" functionality for sub-collections.

3. Click Save.

Step 4: Verify the Changes

1. Click Save on theme.js.liquid as well if you haven't already.
2. Open your live site or preview link in a new tab.
3. Refresh the page to clear the cache.

The Result

You should now notice two major improvements:

• Visual Feedback: When you mouse over menu items, there is a clear visual indication.
• Contextual Menus: When you click a menu item (like "Catalog"), the sub-menu options appear immediately on the homepage. You can click the back arrow to return to the main menu without the page reloading or forcing you to navigate away.

Conclusion

This simple adjustment makes the Boundless theme significantly more user-friendly. By tweaking the code directly, you maintain a fast site speed and avoid the monthly fees associated with menu apps.

If you are looking to build your Shopify brand and want to learn how to customize your site without relying on apps, keep following these technical guides to take control of your store's design.