Compact Menu Layout (Global Menu)

What You’ll Learn

  • How to use the Compact Menu section in Plain Jane
  • How to connect navigation using Global Menu settings
  • Best practices for scrollable homepages

What is the Compact Menu?

The Compact Menu is a section available in the Plain Jane theme that adds a "hamburger-style" navigation icon to the top of your homepage. When clicked, it opens a full menu drawer containing your navigation links.

While the section is called Compact Menu, it connects to the navigation defined in your Theme Settings > Global Menu Settings. That’s why you may see it referred to both ways.

This layout is best for brands that want:

  • A minimal, modern top bar with expandable navigation
  • Full control over scrollable homepage content
  • A clean visual experience for storytelling or drops

How to Add the Compact Menu

  1. In the Theme Editor, go to the Sections panel.
  2. Remove any existing menu sections (Center Menu, Side-Aligned Menu).
  3. Click Add Section > Compact Menu.
  4. You’ll see a hamburger icon appear in the top-right preview.

Connect Your Navigation

To make the drawer menu functional:

  1. Go to Theme Settings > Global Menu Settings.

  2. Select a Shopify menu (or create a new one via Shopify admin).

  3. The menu will now appear when clicking the hamburger icon.

💡 Tip: Update your navigation structure under Online Store > Navigation in your Shopify admin.

Customizing the Look

  • Logo Positioning: Left, center, or right
  • Backgrounds: Pair with a Dynamic Background section for color, image, or slideshow
  • Fonts & Sizes: Tweak menu link size and spacing under Theme Settings > Typography
  • Sections: Add other homepage sections such as:

    • Collection List

    • Product Carousel

    • Image Stream

⚠️ Use the Page Canvas section to wrap and structure all homepage sections.

When to Use the Compact Menu

Great for:

  • Scroll-heavy homepages
  • Brands using visuals, videos, or carousels
  • Mobile-friendly layouts

Avoid if:

  • You want a single-screen landing page (use Center or Side-Aligned Menu instead)

Sample Build Workflow

  1. Add the Compact Menu section
  2. Add a Dynamic Background (image, color, or slideshow)
  3. Add key content sections (Collections, Products, etc.)
  4. Link navigation via Theme Settings > Global Menu Settings
  5. Tweak font sizes and logo position

Need Help?