Header

Store Design
,

Topic summary

Goal: Make the transparent, sticky header show white logo/icons/links, while the scrolled header with white background keeps current styling. Site: dboutique.shop.

Actions taken:

  • Helper advised adding CSS via Online Store > Themes > Edit code > theme.liquid (before ) and shared a result screenshot. Later acknowledged those instructions were incorrect and asked to recheck.
  • OP shared current CSS controlling .header, .header.scrolled, and .header.hidden (links currently set to black). Implementing the provided code did not work.

Logo color:

  • Helper said a separate white logo image is required. OP provided a white logo URL and asked if it’s correct.

Key technical points:

  • Likely need CSS that sets nav/icon/link colors to white when header is transparent, and default/black when .scrolled is applied.
  • May require swapping logo src between default and white versions based on scroll state (via theme settings or small JS).

Attachments central: CSS snippets and a screenshot were referenced; a white logo asset URL was provided.

Status: Unresolved/ongoing. Pending corrected implementation steps and confirmation that the white logo URL is valid and integrated.

Summarized with AI on December 17. AI used: gpt-5.
1

Hey everyone! I need some help.

I have a transparent menu that stays at the top when scrolling down, and when scrolling up, a menu with a white background appears. I want all the icons, links, and the logo in the transparent menu to be white, while in the menu with the white background, everything stays the way it is now. Is it possible to implement this?

Thanks!

link on my site: https://dboutique.shop/

1 Like
2

Hi @dboutique

For your logo, you need to have a white image logo to add on.

For the nav and icons.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”

  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”

  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3 
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent; 
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: none;
}

.header.scrolled {
  background-color: #fff; /* Белый фон */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.header.hidden {
  transform: translateY(-100%); 
}

.header a {
  color: black;
}

.header.scrolled a {
  color: black;
}

This is my code for the header. I inserted the code you gave me, but it didn’t help

4

Sorry, wrong insturction. Please check it again. Thanks!

1 Like
5

thank you!

can i also change the color of the logo?

6

You need to have another white image of the logo. Let me know if you have and please share the url logo. Thanks!

1 Like
7

https://cdn.shopify.com/s/files/1/0658/4759/1063/files/MONOGRAM_WHITE_1_5d3f3bac-5d68-4974-bf8d-c55695d3a2d0.png?v=1728511730

8

my link it’s correctly?