How can I display a slider on a mobile navigation bar?

Store Design

Topic summary

A user is trying to display a slider within their navigation bar on mobile devices.

On desktop, they successfully achieved this using a “Display Parallax” option in theme customization, making the header transparent with the slider visible behind it. However, this setup doesn’t work on mobile—the slider appears below the header instead of within it.

The user shared screenshots showing:

  • Desktop: Slider properly integrated into the transparent navigation bar
  • Mobile: Slider positioned below the header, not integrated as desired

A support representative provided a CSS code solution to paste into the theme-styles.scss.liquid file:

.template-index .wrapper_header_03 {
    background: rgba(255, 255, 255, 0) !important;
}
.template-index .wrapper_header_03 .header-bottom {
    position: absolute;
    width: 100%;
    z-index: 3;
}

This CSS targets the header wrapper to make it transparent and positions it absolutely, potentially allowing the slider to display behind the mobile navigation bar similar to the desktop version.

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

Hey, I was working on my draft theme, and I’m currently stuck on one problem: I want to display my slider on my header/navigation bar. I managed to do it on the desktop through an option called “Display Parallax,” which was in my theme customization, but it’s not working on mobile. Let me share my desktop preview first:

desktop.JPG
desktop.JPG1903×723 101 KB

That’s my desktop preview ^, and as you can see, my slider is on my navigation and header, and I also want the same thing on my mobile preview.

mob.JPG
mob.JPG338×719 37.6 KB

Here’s my mobile preview and as you can see my slider is not going on my header and it’s below it and I want the slider on my header while the header is transparent just like my desktop preview.
Here’s my theme draft link: https://iy7xd0n321t5lvr1-18450743360.shopifypreview.com

2

Hi @Moeed ,

Please go to Actions > Edit code > Assets > theme-styles.scss.liquid file and paste this at the bottom of the file:

.template-index .wrapper_header_03 {
    position: absolute;
    width: 100%;
    z-index: 3;
}
.template-index .wrapper_header_03 .header-bottom {
    background: rgba(255, 255, 255, 0) !important;
}

Hope it helps!