How to Change a Hamburger Menu to a Horizontal Menu in Shopify

What Is a Hamburger Menu?

A hamburger menu is the three-line icon (☰) that expands to show navigation links when clicked.

It is commonly used on mobile devices because it saves space on small screens. On desktop, however, a hamburger menu means your navigation is in a collapsed state instead of fully visible.

What Is a Horizontal Menu (Expanded Desktop Navigation)

A horizontal menu (also called expanded desktop navigation) displays all main navigation links in a row across the top of the page.

Example:

Home | Shop | About Us | Contact

This layout:

• Makes navigation immediately visible
• Improves clarity for first-time visitors
• Reduces the chance that customers miss important pages
• Often improves usability on desktop

While hamburger menus save space, they can hide important categories. If visitors do not click the icon, they may never see your full menu.

For most desktop stores, a horizontal navigation layout is recommended.

How to Change from a Hamburger Menu to a Horizontal Menu

Follow the steps below to switch your desktop navigation from collapsed (hamburger) to expanded (horizontal).

Step 1: Set Up Your Menu Structure

• Go to Shopify Admin.
• Navigate to Content → Menus.
• Open Main menu (or the menu assigned to your header).

• Add, remove, or reorder menu items as needed.
• Drag items slightly to the right to create dropdown structure.
• Click Save.

Step 2: Change Menu Type to Horizontal

• Go to Online Store → Themes.
• Click Customize on your active theme.

• Open the Header section.
• Locate the Menu type setting.
• Change it to either:

Dropdown (recommended for simple stores), or

Mega menu (recommended for stores with many categories).

• Click Save.

Step 3: Enable Shopify Header in GemPages

If you are using GemPages to build your page, you should confirm that the Shopify theme header is enabled.

Even if you correctly change the Menu type to Dropdown or Mega menu in your theme settings, the navigation will not appear if the Shopify header is hidden in GemPages.

To check this:

• Open the page in the GemPages Editor.
• Click the Settings (gear) icon in the top toolbar.

• Toggle on Show Shopify theme Header & Footer.

• Save and Publish the page.

Your static horizontal menu should now appear consistently across both Shopify and GemPages pages.