Drop down

Shopify Discussion

Topic summary

A Shopify store owner has added dropdown menus to their site, but they’re not visible on the live website despite appearing in the backend. They’ve noted that another website using a similar theme works fine.

Troubleshooting steps suggested:

  • Theme customization: Check Online Store > Themes > Customize to ensure dropdowns are enabled and visible in section settings
  • Code inspection: Review header.liquid, theme.liquid, and navigation files for proper <ul>, <li>, or <nav> tags with nested dropdown elements
  • CSS issues: Inspect theme.scss.liquid or theme.css for visibility problems; add custom CSS like .dropdown { display: block; } if needed
  • JavaScript conflicts: Check browser console for errors that might prevent dropdowns from functioning; temporarily disable apps to identify conflicts
  • Browser testing: Clear cache and test across multiple browsers/devices to rule out browser-specific issues

The issue remains unresolved and requires systematic debugging through theme settings, code review, and conflict identification.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I have added some drop downs on my Shopify but for whatever reason on my actual website you cannot see them. Can someone help?

BAFMotorsport_0-1730121792231.png
BAFMotorsport_0-1730121792231.png1302×192 20.5 KB

BAFMotorsport_1-1730121815111.png
BAFMotorsport_1-1730121815111.png652×797 27.4 KB

1 Like
2

I have tried having a look through and I have another website with pretty much the same theme but that works just fine

1 Like
3

  1. Check Theme Customization Settings:

    • Go to Online Store > Themes > Customize.
    • In the theme editor, navigate to the section with your drop-down menus. Ensure that they are enabled and visible in the customization settings.
    • Check if your theme has specific settings for enabling or customizing the appearance of drop-down menus.

  2. Inspect Theme Code for Navigation Menu:

    • If custom code was added, it’s possible that the code for the drop-down menu is missing or not functioning as expected.
    • Go to Online Store > Themes > Actions > Edit Code.
    • Locate and check files like header.liquid, theme.liquid, or any navigation-related files. Ensure that code handling the menu and drop-downs is correct.
    • Look for
        ,
      • , or tags associated with the menu items and ensure they contain nested elements for the drop-downs.

    • Inspect CSS for Visibility Issues:

      • Sometimes, CSS styles may cause drop-down menus to be hidden or improperly displayed.

      • Go to Edit Code > Assets > theme.scss.liquid or theme.css.

      • Add custom CSS to ensure visibility, like this:

        css

        Copy code

        .dropdown { display: block; /* or ‘flex’ depending on your theme layout */ visibility: visible; opacity: 1; }

      • Check for display: none or visibility: hidden properties that might be hiding the menu.

    • Clear Cache and Test on Multiple Browsers:

      • Clear your browser cache to ensure you’re seeing the latest version of your site.
      • Try accessing your website on different browsers or devices to confirm if the issue is browser-specific.

    • JavaScript Conflicts:

      • JavaScript is often used to control the toggle behavior of drop-down menus. If you’ve recently installed new apps or made changes, JavaScript conflicts might prevent the drop-downs from working.
      • Open your site in a browser, right-click, and select Inspect > Console. Look for any JavaScript errors. If you find errors, disabling apps temporarily may help identify the source of the conflict.

Experience personalized shopping and real-time support with the Debales AI Chatbot on Shopify! Enhance customer journeys effortlessly—have any questions? Let’s chat!

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!