# Side Aligned Menu

> **What You’ll Learn**
>
> * How to create a homepage using the Side-Aligned Menu layout
> * How to customize background, menu links, and styling

***

### About the Side-Aligned Menu

The **Side-Aligned Menu** layout places your logo and navigation vertically along the left side of the screen. This layout is clean and minimal, giving visual priority to your background or brand image.

***

### How to Set It Up

#### 1. Start with a Clean Canvas

1. In the Theme Editor, remove all existing sections.
2. Keep only the `Page Canvas` section.

2\. Add the Side-Aligned Menu

1. Click **Add Section > Side-Aligned Menu**
2. Your navigation will now appear on the left side of the screen.
3. Select a **Shopify menu** to connect your navigation links.

{% hint style="info" %}
💡 If you don’t have a menu yet, go to **Shopify Admin > Online Store > Navigation** to create one.
{% endhint %}

***

### Customizing Your Menu

Once added, you can configure the following:

#### Menu Content and Behavior

* **Choose Menu**: Connect a menu from your Shopify navigation
* **Social Media Icons**: Click "Add Social Media Link" to add icons for X, TikTok, Threads, and more
* **Show Login Link**: Choose to show it at the `Top`, `Bottom`, or hide it completely

#### Logo and Link Styling

* **Logo Alignment**: Left or Right
* **Menu Alignment**: Align links left or right within the menu
* **Link Text Color / Hover Color**
* **Link Background Color (on hover)**
* **Link Font Size and Vertical Spacing**

#### Visual Effects

* **Disable Highlight Effect**: Turns off the hover highlight style
* **Enable Nav Scaling**: Enables animation for menu item scaling

***

### Background Customization

The Side-Aligned Menu section includes built-in background options, so you no longer need to use the `Dynamic Background` section. In newer versions of the theme, `Dynamic Background` is deprecated for this layout.

#### Background Style Options:

* **Solid Color**: Set a color for desktop and mobile
* **Image**: Upload different images for desktop and mobile
* **Slideshow**: Add up to 3 rotating image slides
* **Video**: Upload a video background (note: may not autoplay on iPhones with Low Power Mode)

#### Additional Background Settings:

* **Section Height**: Set to Full Height (100%) or custom
* **Overlay Colors & Opacity**:
  * Separate control for top and bottom overlays
  * Independent settings for desktop and mobile

> 💡 Tip: Use overlays to create contrast between text and background visuals.

***

### When to Use This Layout

Use the Side-Aligned Menu when:

* You want a clean, modern layout with vertical nav
* Your background image or brand art is central to the experience
* You don’t plan to use many scrollable sections on the homepage

***

### **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/plain-jane-interactive/pages-and-menus/homepage-+-menu/side-aligned-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.