Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  1. 🗂 Pages & Menus
  2. Homepage + Menu

Compact Menu Layout (Global Menu)

PreviousSide-Aligned MenuNextCollection Page

Last updated 4 days ago

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?

  • 📧 Email us at: support@openspaces.design

  • 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6