Header Design

[nothingchanges]

Hi guys! I need some help.

1. Making my header transparent but not transparent (white) when hover and letters on the header turns from white to black when hover. This already on my other tabs but not on my about page.

2. Making my logo black on header on the link below because now my logo looks like invisible

- https://yiwqh6-vk.myshopify.com/pages/contact

- https://yiwqh6-vk.myshopify.com/pages/return-exchange

-https://yiwqh6-vk.myshopify.com/pages/terms-of-service

-https://yiwqh6-vk.myshopify.com/policies/privacy-policy

[mt686]

Hey there! Let’s get your header design working as you want across all pages. Here's how to handle both points:

---

1. Transparent Header with Hover Effects

You want the header to be transparent initially and switch to white with black text on hover. If it’s not working on your "About" page, there may be specific styles missing or overridden for that page.

Steps:

1. Locate the CSS File:

   • Go to Online Store > Themes > Edit Code.
   • Open theme.css or style.css in the Assets folder.

2. Add the CSS: Add this code to handle the hover and transparency:

   /

* Transparent Header Default */
.header-wrapper {
    background-color: transparent !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header on Hover */
.header-wrapper:hover {
    background-color: white !important;
}

/* Text Color Change on Hover */
.header-wrapper a {
    color: white; /* Default text color */
    transition: color 0.3s ease;
}

.header-wrapper:hover a {
    color: black; /* Text color on hover */
}

/* Specific Style for About Page */
.about-page .header-wrapper {
    background-color: transparent !important; /* Ensures it matches the other tabs */
}

• Add .about-page as a parent selector if necessary to target your About page specifically.

• Test the Changes: Save the file and check the "About" page to ensure the hover effect matches other tabs.

---

2. Making the Logo Black on Specific Pages

Your logo seems invisible because it blends with the transparent background. The solution is to either change your logo image to a colorized version, or to make your header or page background a color besides white.

---

Easier Option with EasyEdits

If you'd prefer a no-code solution, EasyEdits allows you to style your header, hover effects, and even replace logos visually without touching the code. You can try it for free and keep your changes forever.

---

Let me know if you need help identifying classes or refining the setup! (P.S. I’m the developer of EasyEdits, so feel free to ask about it 😊).

[nothingchanges]

It doesn't work. Do you have any other way?

[DaisyVo]

HI @nothingchanges 

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 </head>

{% style %}
{% if template.name != "index" %}
.shopify-section.shopify-section-group-header-group.section-header:not(.scrolled-past-header) .header__heading-logo-wrapper img {
    filter: invert(1) !important;
}
{% endif %}
{% endstyle %}

Here is the result: 

I hope this helps

Best,

Daisy