Header

Store Design
,
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?