Slideshow blocks navigation dropdown menu

Technical Q&A
, , ,

Topic summary

A user implemented clickable slideshow functionality in a Shopify Dawn theme by adding an absolutely positioned anchor tag with z-index: 999. This created an unintended consequence: the slideshow overlay blocked the header’s dropdown navigation menu from being clicked.

Problem Details:

  • The anchor tag’s high z-index caused it to layer above dropdown menu items
  • Users couldn’t interact with navigation links that appeared over the slideshow area

Solutions Provided:

Two community members offered CSS fixes targeting base.css:

  1. websensepro’s approach: Increase z-index of submenu items to 1111111 !important

  2. oscprofessional’s approach: Set .header__submenu.list-menu to z-index: 999999 and .slideshow__slide.grid__item to z-index: 2

Resolution:
The issue was resolved using oscprofessional’s code, which successfully allowed dropdown menus to appear above the clickable slideshow while maintaining the desired functionality.

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

hi everyone

I have added below code to slideshow.liquid to make the slideshow image clickable, as per hhttps://community.shopify.com/post/1612021

and another section

{

“type”: “url”,

“id”: “image_link”,

“label”: “Image Link”

},

Now I have discovered an issue. The slideshow image is blocking the dropdown list menu to be clicked.

When I click on any of the list items (in red) which is in the display area of the banner, I actually clicked on the banner.

Can anyone enlighten me?

111.png
111.png1931×1227 273 KB

1 Like
2

Hi Exprt_dev

Thanks for your help. Please visit https://www.caffemolinari.com.au<>

3

Hi @haoli1

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.header__submenu .header__menu-item {
    z-index: 1111111 !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

4

Hi @haoli1 ,

Go to Online Store > Themes > Actions > Edit Code > base.css
Add below code in base.css file

.header__submenu.list-menu {
    z-index: 999999;
}
.slideshow__slide.grid__item {
    z-index: 2;
}

oscprofessional_0-1735799243357.png
oscprofessional_0-1735799243357.png1482×548 298 KB

5

Thank you so much. Your code works on my store perfectly.

6

Hi Websensepro,

thanks for providing your code. It didn’t work on my theme unfortunately.

7

thanks Exprt_dev, thanks for your detailed explanation. However, I decided to use a simple code from below.