Section covers banner when scrolling

[Daniel19901]

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:

The bug:

[BSS-TekLabs]

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

We hope this assists in resolving the issue.

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

[BSS-TekLabs]

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

- 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:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Daniel19901]

@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 😞 

[BSS-TekLabs]

Can you try this code again @Daniel19901 

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