Custom Header

Shopify Discussion
, ,
1

Hello!

I am currently working on a few new designs for my website and I want to do a transparent header. is there a way that the transparent header is only on the home page and none of the other pages? and is there a way to get a hover effect for the desktop version so when i hover over the header with my mouse it goes back to solid white color?

thanks for the help!

2

Yes, this is possible in most Shopify themes, but the exact implementation depends on your theme.

  1. Transparent header only on homepage

You can usually target only the homepage using a Liquid condition like this:

{% if template.name == 'index' %}
  <!-- Add transparent header styles or class here -->
{% endif %}

In many themes (like Dawn), a more reliable approach is using the body class:

.template-index .site-header {
  background: transparent;
}

This ensures only the homepage header becomes transparent.

  1. Hover effect for desktop (transparent → solid)

You can use CSS hover states like this:

@media (min-width: 990px) {
  .site-header {
    background: transparent;
    transition: background-color 0.3s ease;
  }

  .site-header:hover {
    background: #fff;
  }
}

Note:

The exact class names (.site-header, .header-wrapper, etc.) depend on your theme, so you may need to inspect your theme’s HTML and adjust selectors accordingly.

If you tell me your theme name, I can give you a more precise version.

3

where do I paste these codes?

4

im using the dawn theme

5

You’ll need to go into the edit code section and find the file for your homepage.

6

Hi @LeandroS

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

7

Can you share your store url and password so that I can take a look and provide you the solution code.

8

Hi @LeandroS . Hope you are doing well !

Yup, that’s totally doable, a quick CSS tweak can make the header transparent only on the homepage and flip to solid white on hover.
You will just need a developer to add it in.