Section covers banner when scrolling

Store Design
, , ,
1

Hi, could anyone help me solving this?
My heronbanner on the homepage is being covered by the following section once I scroll down on desktop. Can anyone help with the code?

https://aaba5d-52.myshopify.com/

How it should be:

Daniel19901_1-1721917522726.png
Daniel19901_1-1721917522726.png1879×586 136 KB

The bug:

Daniel19901_0-1721917502497.png
Daniel19901_0-1721917502497.png1897×651 113 KB

2

Hi @Daniel19901 ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.t4s-section-inner.t4s-has-imgbg > picture > img {
    position: relative;
    top: 400px;
}

Here is the result

BSSTekLabs_0-1721917778019.png
BSSTekLabs_0-1721917778019.png2878×1620 514 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

3
  • Here is the solution for you @Daniel19901
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.t4s_ratio:not(.t4s_bg)>*:not(.t4s-not-style) {
 z-index: 9 !important; 
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721917826278.png
BSSTekLabs_0-1721917826278.png1895×901 204 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

@BSS-TekLabs thank you for that- almost worked, but now the collection header as well as the quick view buttons and badges are covered by it as well :disappointed_face:

5

Can you try this code again @Daniel19901

t4s-hero-inner .t4s-img-as-bg.t4s-d-none {
  z-index: 9 !important;
}