# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/pages-and-menus/homepage-+-menu/compact-menu-layout-global-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.