# Modify menu position (advanced)

This guide walks you through placing the Globo Mega Menu precisely where you want it within your Shopify theme. Ideal for those comfortable with editing theme code, this method offers full control over menu placement.

### 🔧 Step 1: Access Your Theme's Code

1. Navigate to your Shopify Admin panel.
2. Go to **Online Store** > **Themes**.
3. Find your active theme and click **Actions** > **Edit Code**.

<figure><img src="/files/0WQ4cvjTygO8Ot4SkVOj" alt=""><figcaption></figcaption></figure>

### 🧱 Step 2: Insert Menu Containers

Determine where you want the menus to appear:

* **Desktop Menu**: Typically placed in `header.liquid`.
* **Mobile Menu**: Often located in `theme.liquid` or a mobile-specific file.

Insert the following HTML snippets where appropriate:

* **Desktop Menu Container**:

```html
<div id="GloboDesktopMenu"></div>
```

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

* **Mobile Menu Container**:

```html
<div id="GloboMobileMenu"></div>
```

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

These `<div>` elements act as placeholders, allowing the Globo Mega Menu app to render menus at these specific locations.

### 🎯 Step 3: Using CSS Selectors

For precise control over menu placement, specify the exact CSS selectors corresponding to your theme's menu elements:

1. Open the **Globo Mega Menu** app.
2. Navigate to **General Settings**.
3. Choose **Show menu on this CSS selector**.
4. In the **CSS Selector of your main menu** field, enter *#GloboDesktopMenu*
5. In the **CSS Selector of your mobile menu** field, enter *#GloboMobileMenu*
6. Click **Save** to apply the changes.

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

### 💾 Step 4: Save and Preview

1. Click **Save** to apply your changes.
2. Visit your storefront to ensure the menus appear as intended.
3. If adjustments are needed, revisit the code editor to fine-tune placement.

### 🧠 Tips & Considerations

* **Theme Variations**: Theme structures can vary. If you're unsure about where to place the menu containers, consult your theme's documentation or seek assistance.
* **Responsive Design**: Ensure that the menu placement works well on both desktop and mobile devices for optimal user experience.
* **Backup**: Before making changes, consider backing up your theme to prevent any unintended issues.

#### 💬 Need help?

Email us at **📧 <hi@globosoftware.net>** - we’re happy to assist!


---

# 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.globo.io/mega-menu/modify-menu-position-advanced.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.