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

Store Design
, , ,
1

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!

2

@Krissiloula add below css into base.css file

.gradient {
    background: transparent !important;
}
3

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;
}
​
4

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

5

@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

6

This just takes the announcement bar away

7

Craft theme make transparent header: