transparent Header color on hover dawn theme

[silenceclothing]

Hello.

I need help to make my transparent header color on hover. I am using dawn theme. Anyone know how to do this?

[rajweb]

Hey @silenceclothing ,

To make your transparent header change color on hover in the Shopify Dawn theme, you can use CSS. Here’s how you can do it:

Follow These Steps:

1. Online Store

2. Themes

3. Edit Code

4. In the code editor, go to Assets > base.css (or similar).

5. Add the following CSS at the bottom of the file:

.header {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.header:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Adjust the color and transparency as needed */
}

- Replace .header with the exact class or ID used by your theme for the header if it’s different.

- Adjust the rgba(0, 0, 0, 0.8) value to your desired hover color and transparency.

- Use a tool like your browser’s developer tools (Inspect Element) to identify the exact class or ID for the header if needed.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[silenceclothing]

it almost works, but the color is not covereing the whole sides? and how do i change color?

[rajweb]

@silenceclothing ,

If the color isn’t covering the entire width of the header, it may be due to padding or margins in the header container. Here's how to fix it and customize the color:

Ensure Full-Width Coverage:

Update the CSS to include width and position properties to make sure the background color spans the full width of the header:

.header {
  background-color: transparent;
  transition: background-color 0.3s ease;
  width: 100%;
  position: fixed; /* Keeps the header in place when scrolling */
  top: 0; /* Ensures it sticks to the top */
  left: 0; /* Aligns it to the left */
  z-index: 1000; /* Keeps the header above other elements */
}

.header:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Change to your desired hover color */
}

Change the Hover Color:

The hover color is controlled by the background-color property in the .header:hover rule.

Use a different rgba value for a custom color. For example:

- Red: rgba(255, 0, 0, 0.8)

- Blue: rgba(0, 0, 255, 0.8)

- Green: rgba(0, 255, 0, 0.8)

You can also use hex codes:

background-color: #ff0000; /* Bright red */

Check Padding or Margins:

If there's still a gap on the sides, it could be due to default padding or margins. Reset them for the header:

.header {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

If you have more tweaks on your theme, feel free to reach out via email so we can discuss the details further. I’d be happy to help. Thanks!

Let me know if this works or if you'd like additional refinements!

Thanks

[silenceclothing]

this just did it wors...

[topnewyork]

Hello, @silenceclothing 
Please share "Store URL"
Thanks!

[topnewyork · Accepted solution]

Hi @silenceclothing 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>

.header-wrapper.color-scheme-95fafa66-77d0-4a87-811c-eeb7bed11590.gradient.header-wrapper--border-bottom:hover {
    background-color: blue !important;
}
</style>

 If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks

[silenceclothing]

thanks!

[silenceclothing]

is it possible to add separator line under?