How to make the header transparent and have image behind it on Craft theme

[Krissiloula]

I want to make my header transparent and overlay on top of my image banner - see website link for example of what I'm looking to achieve. I'm using the Craft theme.

Many thanks!

[Ujjaval]

@Krissiloula add below css into base.css file 

.gradient {
    background: transparent !important;
}

[Krissiloula]

This just takes the announcement bar away

[NomtechSolution]

To make the header transparent and overlay it on top of the image banner in the Craft theme, you can follow these steps:

1. Open your Shopify admin and go to "Online Store" -> "Themes".
2. Click on "Actions" and select "Edit code" for the Craft theme.
3. Locate the file that controls the header section. Typically, it is found in a file named header.liquid or header-section.liquid.
4. In the header file, add the following CSS code:

.site-header {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.site-header__inner {
  background-color: transparent;
  padding: 20px; /* Adjust the padding as needed */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
​

[Krissiloula]

Thanks for your reply, however this isn't working and the code just shows up as text in the actual header bar.

[Ujjaval]

@Krissiloula Try below one it might be like to you : 

@media (min-width:768px){
.gradient {
background: rgba(255, 255, 255, 0.47);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(1.6px);
-webkit-backdrop-filter: blur(1.6px);
border: 1px solid rgba(255, 255, 255, 0.22);
}
}

or provide preview link or store link

[MRamzan]

Craft theme make transparent header: