Header Covering The Top Of SliderShow Image

Store Design
, , ,

Topic summary

A Shopify store owner reports their header overlapping slideshow images and other theme sections below it, despite the sticky header option being disabled. Screenshots demonstrate the header appearing on top of the slideshow section.

Attempted Solutions:

  • BSS-Commerce initially suggested adding CSS to set .header-wrapper to position: relative !important in the base.css file
  • When this failed, they recommended targeting #header with the same CSS property
  • The issue persisted on ultrawide monitors, with the user noting the sticky header toggle also doesn’t function

Current Status:

  • BSS-Commerce provided a third solution: adding object-fit: contain !important to .swiper-container .swiper-slide img in base.css, claiming this resolved the overlap
  • Another user (GabbyGrace) reports experiencing the identical problem
  • The root cause appears to be position: fixed or position: sticky CSS applied to the header element

Resolution: Unclear if the final CSS fix successfully resolved the original poster’s issue, as no confirmation was provided.

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

Good day!

I don’t know why but my header is always showing over the top of any theme section that i put below it. (stick is not activated)

PilaTech_0-1685389906986.png
PilaTech_0-1685389906986.png1249×543 164 KB

PilaTech_1-1685389930898.png
PilaTech_1-1685389930898.png1068×449 118 KB

PilaTech_3-1685390062297.png
PilaTech_3-1685390062297.png234×168 3.52 KB

PilaTech_2-1685390008653.png
PilaTech_2-1685390008653.png279×175 8.07 KB

As you can see in theme personalization the header is over the slideshow section.

2

@PilaTech
Hello,
can You Please Share Your Store URL I Will Check and Provide Proper Solution

3

Hi @PilaTech

  • Because the Header have css like:
position: fixed;

or

position: sticky;

so will always show at the top

  • Want the header to not always show on top
  • Go to themes => Edit code
  1. Find the file base.css in the folder Assets and add the following code at the end of the file:
.header-wrapper {
  position: relative !important;
}

If It still doesn’t work, you can send us your link store to check more accurately.

4

https://pilatech.myshopify.com

5

didnt work

https://pilatech.myshopify.com

6

Hi @PilaTech

Go to themes => Edit code

Find the base.css file in the Assets folder and add the following code at the end of the file:

#header{
position: relative !important;
}
  • result:

BSSCommerce_0-1685515131350.png
BSSCommerce_0-1685515131350.png1711×828 119 KB

Hope this suggestion can help you.

1 Like
7

thanks for the answer but it still doesn’t work, on ultra wide monitors it continues behind the header.

One thing I noticed too was that activating the stick header doesn’t work either

8

Hi @PilaTech

Go to themes => Edit code

Find the base.css file in the Assets folder and add the following code at the end of the file:

.swiper-container .swiper-slide img {
    object-fit: contain !important;
}
  • Result:

BSSCommerce_1-1685956546813.png
BSSCommerce_1-1685956546813.png1706×836 142 KB

If this suggestion can help you, please mark as a solution. Thank you!

9

I am having this same problem. My store url is: