Sense theme - make header transparent on image banner

Store Design
,
1

I am using the sense theme and i want to know how i can make my header transparent and add a image banner so my header can be on top of it

2

Hello @mudasseer ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Assets folder → base.css file → add the following code at the bottom of page
.site-header {
  position: absolute;
  width: 100%;
  z-index: 999;
  background-color: transparent;
}

.site-banner {
  height: 500px; // Change this to the desired height of your banner
  background-image: url("your-image-url.jpg"); // Replace this with the URL of your banner image
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.site-content {
  padding-top: 500px; // Change this to match the height of your banner
}

Replace “your-image-url.jpg” with the URL of the image you want to use as your banner.

  • Save and preview

Hope this can help you out. Let us know if you need any further support.

Ali Reviews team.

3

I cant seem to make it work. Please, could you check?

https://1f097c-e6.myshopify.com/

PW - Testar

This is how I want it - https://www.nudient.se/