# 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