Skip to content
RockStarUI Docs

Mega Menu

What this section does

Section titled “What this section does”

This section controls the desktop flyout navigation layout, including menu columns, taxonomy links, and optional promotional cards.

Mega menu opened from the Shop navigation item, with two link columns and two promotional cards on the right.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. Open the Header section.
  4. Use these controls in Header settings:
    • Menu
    • Enable flyout (mega) menu
    • Mega menu column 1 heading
    • Mega menu column 2 heading
    • Mega menu heading for single links (only when using 3rd-level menus)
    • Mega menu "view all" label
    • Show promo cards in mega menu
    • Show promo cards only for menu item title (optional)
    • Promo card 1 and Promo card 2 fields

Core Structure

Section titled “Core Structure”

The mega menu has 3 zones:

  1. Column 1: taxonomy/category links.
  2. Column 2: discovery links (for Shop this includes New arrivals, Best sellers, All furniture).
  3. Right side cards: promotional cards with image, copy, and CTA.
Section titled “Edit Existing Menu Links”

For top-level items and their child links:

  1. Go to Online Store -> Navigation -> Main menu.
  2. Edit any top-level item (for example, Shop, Pages, Blog).
  3. Edit nested links by dragging/indenting menu items.
  4. Save, then refresh Theme Customizer preview.

Add A New Mega Menu

Section titled “Add A New Mega Menu”

To create a new flyout for a new top-level item:

  1. Go to Navigation -> Main menu.
  2. Add a top-level item (example: Collections).
  3. Add child links under that item.
  4. Keep Header -> Enable flyout (mega) menu enabled.
  5. Save.

Behavior:

  1. Any top-level item with children can render as a mega-style flyout.
  2. If child items have their own children (3rd level), each child group becomes a separate mega column.
  3. Child links without grandchildren are grouped under the Mega menu heading for single links label.

Disable Promo Cards (Config Cards)

Section titled “Disable Promo Cards (Config Cards)”

To disable all right-side promo cards:

  1. Open Header settings.
  2. Turn off Show promo cards in mega menu.
  3. Save.

To disable promo cards only for specific menus:

  1. Keep promo cards enabled.
  2. Set Show promo cards only for menu item title to the exact top-level label (example: Shop).
  3. Menus with different titles will render without cards.

To disable only one promo card:

  1. In Header settings, open Promo card 1 or Promo card 2.
  2. Clear its Heading.
  3. Save.

Configure Promo Card Content

Section titled “Configure Promo Card Content”

For each promo card you can manage:

  1. Image
  2. Background color
  3. Eyebrow text
  4. Heading
  5. Body text
  6. Button label
  7. Button link

Shop-Specific Logic

Section titled “Shop-Specific Logic”

The Shop mega menu has additional behavior in this theme:

  1. Column 1 pulls category taxonomy from Theme settings -> Taxonomy -> Primary taxonomy menu.
  2. If that taxonomy menu is empty, the theme falls back to Shop child links from Main menu.
  3. If both are empty, the theme uses a default set: Bedroom, Seating, Storage, Tables.
  4. Column 2 includes links to New arrivals, Best sellers, and All furniture.
  5. The bottom “view all” row text comes from Mega menu “view all” label.
Section titled “Full Header Functions Related To Navigation”

These settings affect navigation behavior in and around the mega menu:

  1. Menu: main source for top-level and nested nav structure.
  2. Enable flyout (mega) menu: switch between mega layout and simple dropdown layout.
  3. Bundle builder page + Menu label: controls the bundle link destination and label.
  4. Store locations page + Menu label: controls the store locations link destination and label.
  5. Mega menu column 1 heading: left column heading text.
  6. Mega menu column 2 heading: second column heading text.
  7. Mega menu heading for single links: heading used for ungrouped links in 3rd-level menu structures.
  8. Mega menu "view all" label: bottom call-to-action label (clear to hide).
  9. Show promo cards in mega menu: global card on/off.
  10. Show promo cards only for menu item title: title filter for card visibility.
Section titled “Recommended Merchant Workflow”
  1. Update navigation links first in Navigation.
  2. Update mega headings and card settings in Header.
  3. Validate desktop and mobile navigation behavior in Theme Customizer.
  4. Publish only after checking all collection and page links are valid.

Tips

Section titled “Tips”
  1. Build link hierarchy in Navigation first, then style it in Header settings.
  2. Use promo cards only where they add value; too many visual CTAs reduce menu clarity.
  3. Keep column headings short so scanability stays strong on wide menus.

FAQs

Section titled “FAQs”

Why are promo cards not showing for some menu items?

Section titled “Why are promo cards not showing for some menu items?”

If Show promo cards only for menu item title is set, cards render only for the exact matching top-level label.

Section titled “Why did my first column links change unexpectedly?”

Column 1 can pull from Theme settings -> Taxonomy -> Primary taxonomy menu. If that menu changes, mega menu category links update too.

Can I use mega menu without promo cards?

Section titled “Can I use mega menu without promo cards?”

Yes. Keep Enable flyout (mega) menu on, and disable Show promo cards in mega menu.

Section titled “Related guides”

Need help?

Section titled “Need help?”

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