# Center Menu

> **What You’ll Learn**
>
> * How to build a homepage using the Center Menu layout
> * How to connect your menu links and customize fonts, colors, and alignment

***

### About the Center Menu

The **Center Menu** layout places your logo and navigation items stacked vertically in the center of the page. It’s inspired by brands like Supreme and is designed for stores that want a high-impact landing experience with minimal scroll.

This layout works best with a strong background (image or video) and minimal homepage content.

> ⚠️ The `Dynamic Background` section has been deprecated in the latest theme versions. All background customization should now be handled directly within the Center Menu section.

<figure><img src="/files/Gv2c47RXMFjbF0hTR9Sg" alt=""><figcaption></figcaption></figure>

### How to Set It Up

#### 1. Start with a Clean Canvas

* In the Theme Editor, remove all sections except `Page Canvas`.

<figure><img src="/files/hImfcSsCJRiSSlZv5Vps" alt=""><figcaption></figcaption></figure>

#### 2. Add the Center Menu Section

* Click **Add Section > Center Menu**
* Your logo and menu will appear centered on the page

<div><figure><img src="/files/stS0dbseaoy2Ryzgfyoa" alt=""><figcaption></figcaption></figure> <figure><img src="/files/kREh8jeSJIoh26IY7QEw" alt=""><figcaption></figcaption></figure></div>

#### 3. Connect Your Navigation Menu

* In the Center Menu settings, select a Shopify menu from the dropdown
* If you don’t have a menu yet:
  * Go to **Shopify Admin > Online Store > Navigation** and create one

<figure><img src="/files/fVmDOrTDgnmFCGKPYDAB" alt=""><figcaption></figcaption></figure>

***

### Customizing the Center Menu

#### Logo Settings

* **Clock**: Enable or disable the live store clock display
* **Date Format**: Choose your preferred date format
* **Time Color**: Customize clock text color

#### Menu Configuration

* **Choose Menu**: Connect your navigation
* **Alignment**: Align your links to the left, center, or right
* **Show Login Link**: Optionally display a customer login button

#### Styling Options

* **Link Text Color**
* **Link Text Color (on hover)**
* **Link Background Color (on hover)**
* **Link Font Size**
* **Link Vertical Spacing**

#### Social Media Icons

* Add links for X, Instagram, TikTok, and more via the Social Media Link block under the section

***

<figure><img src="/files/hyBqsKkMiU0YFjihs3uC" alt=""><figcaption></figcaption></figure>

### Background Options

The Center Menu section allows the following background types:

* **Solid Color**: Set different colors for desktop and mobile
* **Image**: Upload background images per device
* **Slideshow**: Add up to 3 rotating images
* **Video**: Add a looping video background (Note: videos may not autoplay on iOS with Low Power Mode enabled)

#### Additional Settings

* **Section Height**: Set to Full Height or adjust manually
* **Overlay Options**:
  * Control top and bottom overlay colors and opacity
  * Separate controls for desktop and mobile

> 💡 Tip: Use overlays to help white or light text stand out against background images or video.

***

<figure><img src="/files/mAde5mm0Drc31L1yd1gS" alt=""><figcaption></figcaption></figure>

### When to Use This Layout

Use the Center Menu layout when:

* You want a bold, minimal homepage
* You want the first interaction to be a simple menu with high visual impact
* You want to drive traffic directly into collections or product pages

***

### **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/center-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.