Dropdown menu hides behind the slideshow Debut Theme

Store Design

Topic summary

Users are experiencing an issue where dropdown menus from the header navigation are being hidden behind the slideshow element in Shopify’s Debut theme.

Proposed Solution:

  • Add CSS code to the theme.scss.liquid file (located in the ‘assets’ folder)
  • Insert the following at the bottom of the file:
.site-nav__dropdown {
  z-index: 9;
}
  • Save the file after pasting the code

Ongoing Issues:

  • The problem persists on mobile devices for some users
  • At least one user reports the CSS fix didn’t resolve their issue, particularly when using the Sense template with the front page banner hiding the dropdown menu on mobile

The discussion remains open with unresolved cases, particularly for mobile responsiveness.

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

I know this has probably been asked 100 times but I’m having an issue with putting a slideshow directly below my header menus (which have a dropdown) - they are hiding the dropdown bit! Can anyone help?

My Store: www.kitty-cactus.com

p/w: construction

2

Hello,

Add in theme.scss.liquid

.site-nav--active-dropdown .site-nav__dropdown {
    z-index: 9;
}
3 Likes
3

Thank you! can you let me know which section and line to add it to?

4

You have to add it in theme.scss.liquid
You can find this file under ‘assets’ and you have to paste this css code in bottom of file ‘theme.scss.liquid’
Once you paste it don’t forget to save the file.

Thanks

2 Likes
5

im having this issue on mobile, an ideas how to fix this?

6

Hello, I tried to use this code but nothing changed. I have been struggling to fix this issue, I am using the sense template and on mobile, the dropdown menu hides behind the banner of the front page…