Globo Docs
Globo Mega Menu
Globo Mega Menu
  • Basic Knowledge
  • Getting started
  • Enable App embed
  • Publish new menu to theme
    • Automatic
    • Replace navigation
    • Show menu on this CSS selector
  • Preview menu on draft theme
  • Disable app from theme
  • Modify menu position (advanced)
  • Import/Export menu
  • Manage menu items
    • Add main menu item
      • Create brand-new menu item
      • Add item from exising page
    • Modify main menu item
      • Edit menu item
      • Delete menu item
      • Duplicate menu item
    • Manage submenu items
      • Create new submenu
        • Dropdown menu
        • Mega menu
        • Tabbed menu
      • Design mega-menu submenu
      • Apply masonry layout
    • Translate menu items
      • Use translation mode
      • Use localization page
    • Add contact form to menu
    • Add badge to menu item
    • Upload custom icon for menu item
  • Split link list into multiple columns
  • Adjust menu styling
  • Change menu layout
  • Hide arrow indicators
  • Adjust menu font
    • Use available fonts
    • Use custom font
  • Adjust menu colors
  • Other Settings
    • Show search box on menu
    • Enable scrollbar for submenu
    • Configure Account links
  • APP INTEGRATION
    • Multi-language apps
  • FAQS
    • Why are Shopify's changes not reflected on menu?
    • How to pause/cancel my subscription?
    • Why menu item not redirecting on mobile?
    • What is the difference between Free vs Professional plan?
    • Can I have different menus on different markets/countries
    • Can I show each separate menu on mobile version and desktop version
    • How to show the maps/youtube video on submenu
Powered by GitBook
On this page
  • 🔧 Step 1: Access Your Theme's Code
  • 🧱 Step 2: Insert Menu Containers
  • 🎯 Step 3: Using CSS Selectors
  • 💾 Step 4: Save and Preview
  • 🧠 Tips & Considerations

Modify menu position (advanced)

PreviousDisable app from themeNextImport/Export menu

Last updated 1 month ago

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.

🧱 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:

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

  • Mobile Menu Container:

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

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.

💾 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 📧 [email protected] - we’re happy to assist!