Skip to content
RockStarUI Docs

Header

What this section does

Section titled “What this section does”

The Header controls your store’s top navigation, logo behavior, and key utility links. This is the section merchants adjust most when changing site structure and brand presentation.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. In the left panel, open Header group -> Header.
  4. Save after checking both desktop and mobile previews.

Shopify Theme Editor with the Header section selected, showing the left section list, header preview area, and Header settings panel with menu, logo, mega menu, and link controls.

Editor Layout Overview

Section titled “Editor Layout Overview”
  1. Left sidebar (Sections tree):
    • Shows the current template structure.
    • Header is selected.
    • Add section adds new sections to the page template (not inside the header itself).
  2. Center preview (storefront canvas):
    • The blue outline marks the selected Header section.
    • You can visually confirm logo size, menu labels, and icon spacing here.
  3. Right settings panel (Header settings):
    • This is where header behavior and content are configured.
  4. Top editor bar:
    • Store name + live status.
    • Current template/page selector (Home page).
    • Device preview controls.
    • Save button.

Header Items In The Storefront Row

Section titled “Header Items In The Storefront Row”

These are the header elements visible in the preview:

  1. Logo (brand mark at left).
  2. Primary navigation links (Home, Shop, Make Your Bundle, Store Locations, Blog, Pages).
  3. Utility icons (Search, Account, Cart).

Header Settings Panel: Field-By-Field

Section titled “Header Settings Panel: Field-By-Field”
Section titled “Menu”
  1. Menu (Main menu selector):
    • Chooses the navigation source used for top-level links and dropdown structure.
    • To change link order/items: go to Online Store -> Navigation -> Main menu.
Section titled “Logo”
  1. Custom logo image:
    • Upload or replace the logo asset.
  2. Logo alt text:
    • Accessibility text read by screen readers and used when image does not load.
  3. Desktop logo width:
    • Controls rendered logo width on desktop.
  4. Desktop logo max height:
    • Caps logo height on desktop layouts.
  5. Mobile logo width:
    • Controls rendered logo width on mobile.
  6. Mobile logo max height:
    • Caps logo height on mobile layouts.

Mega Menu

Section titled “Mega Menu”
  1. Enable flyout (mega) menu:
    • On: desktop dropdowns render as mega menu layout.
    • Off: dropdowns render as simple submenu list.
Section titled “Bundle Builder Link”
  1. Bundle builder page:
    • Selects which page this nav item points to.
  2. Menu label:
    • Sets the visible text (example: Make Your Bundle).
Section titled “Store Locations Link”
  1. Store locations page:
    • Selects destination page for the store locations item.
  2. Menu label:
    • Sets link text shown in navigation (for example Store Locations).

Common Header Tasks

Section titled “Common Header Tasks”
Section titled “Change main navigation links”
  1. Open Online Store -> Navigation -> Main menu.
  2. Add, remove, rename, or reorder menu items.
  3. Save and return to Theme Editor to verify.

Add a new top-level nav item

Section titled “Add a new top-level nav item”
  1. In Main menu, add a new top-level item.
  2. Add child items if it should open a dropdown/mega menu.
  3. Save and confirm behavior in desktop and mobile preview.

Disable mega menus quickly

Section titled “Disable mega menus quickly”
  1. In Header settings, disable Enable flyout (mega) menu.
  2. Save.
Section titled “Update bundle/store links”
  1. In Header settings, choose the target pages for:
    • Bundle builder page
    • Store locations page
  2. Update each Menu label as needed.
  3. Save and test navigation links on the storefront.

Tips

Section titled “Tips”
  1. Keep top-level labels short for cleaner desktop layout.
  2. Set meaningful alt text for logo assets.
  3. Check both desktop and mobile preview before publishing.
  4. Save only after confirming all nav links resolve to the intended pages.

FAQs

Section titled “FAQs”

Why is my menu not updating in the header?

Section titled “Why is my menu not updating in the header?”

The header pulls from the selected Menu setting. Confirm you edited the same menu handle selected in Header settings (usually Main menu), then save and refresh preview.

Why did the mega menu stop showing?

Section titled “Why did the mega menu stop showing?”

Check Enable flyout (mega) menu in Header settings. If disabled, dropdowns render as standard submenus.

Why does the logo look different on mobile?

Section titled “Why does the logo look different on mobile?”

Desktop and mobile logo size limits are separate controls. Adjust the two mobile logo fields independently.

Section titled “Related guides”

Need help?

Section titled “Need help?”

If you still need help, contact support via the Contact page.