Transparent Header

Shopify Discussion
9

Hi,

Add Custom CSS

CSS code example

/* Make header transparent */
.site-header {
    background-color: transparent;
    position: fixed; /* Ensure the header stays fixed at the top */
    width: 100%;
    z-index: 1000; /* Ensure the header is above other elements */
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

/* Optional: Adjust header elements color for better visibility on transparent background */
.site-header a,
.site-header .menu,
.site-header .logo {
    color: white; /* Adjust to your preference */
}

/* Ensure there is no background when scrolling */
body {
    margin-top: 0; /* Prevent any top margin that might be added */
}

Ensure no JavaScript interference