Make header transparent on home page only

Store Design
, , ,
1

hello, i want to make my header transparent but only on my home page.

Screenshot 2025-01-09 at 12.01.46.png
Screenshot 2025-01-09 at 12.01.46.png890×179 44.1 KB

my website is www.marcomontesi.com , theme is dawn

2

HI @ads18922

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above 

{% if template.name == "index" %}
{% style %}
main#MainContent {
    margin-top: -150px;
}
sticky-header.header-wrapper {
    background: transparent !important;
}
{% endstyle %}
{% endif %}

Here is the result:

image_720.png
image_720.png719×368 261 KB

I hope this helps

Best,

Daisy

3

Hello, @ads18922

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.sticky-header.header-wrapper {
    background: transparent !important;
}

.banner__media:first-child {
    width: 100%;
    top: -146px !important;
}

Thanks!

4

how can i make the logo background transparent aswell? I don’t want that big white box around it

5

Hi @ads18922

The issue before was because your image had a background.

Now that you’ve replaced it with an image without a background, you can apply the code, and it will work properly.

Best,

Daisy