# 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?**
>
> * 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
> * 📧 **Email us at:** <support@openspaces.design>
> * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website