Brooklyn theme: change transparent logo color once I go to collections pages

Store Design
1

9ABFF539-FA72-43D5-AD36-B7D9E9AAF66B.jpeg
9ABFF539-FA72-43D5-AD36-B7D9E9AAF66B.jpeg1170×391 51.2 KB

B6633F17-C711-4EC5-801C-552D62A3DB1A.jpeg
B6633F17-C711-4EC5-801C-552D62A3DB1A.jpeg1170×322 8.69 KB

Hi, I have a problem getting my logo to appear once I navigate to a different collection page on my website, it’s transparent because initially it looks best on the homepage, but I need it to turn black to be visible with white backgrounds. Is there any way to change this? 1st photo is logo on my homepage, 2nd photo logo appears invisible

2 Likes
2

Hello There,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

3

@Hrj1

Hi,
Welcome to Shopify Community.
Kindly Share your Store URL. So that I can help you.

Thank you.

4

My store URL is: https://shopinthebloom.com

5

URL: https://shopinthebloom.com

6 
.site-header {
    background-color: #ededed !important;
    padding: 15px 0;
}

@Hrj1
Add this code in theme.scss or theme.css

7

C448D5FE-8F89-4804-8BE1-82C8FE8346D3.jpeg
C448D5FE-8F89-4804-8BE1-82C8FE8346D3.jpeg1170×576 57.5 KB

It didn’t work - instead now it’s just a grey background

8

@Hrj1
You Need a Developer for that to make it By Custom code.
What background-color: you want .

Don’t worry we will help you for that.

Thank you.

9

D275894F-8CD6-4B0C-9800-439DB32D1CEA.jpeg
D275894F-8CD6-4B0C-9800-439DB32D1CEA.jpeg1170×391 51.2 KB

I want the transparent logo on my homepage as it appears in the photos here. but on all other pages I would like the logo to be black. When moving to other pages where backgrounds are white, my white logo disappears because it’s white on white. Is there a way to make the logo change to black once moving to different pages?

10

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
body ul#SiteNav .site-nav__childlist{ width: 100%; }
body ul#SiteNav .site-nav__childlist .site-nav__childlist-grid { width: 100%; justify-content: center;}
body ul#SiteNav ul.site-nav__childlist-grid > li { padding: 0 10px !important;}
body ul#SiteNav .site-nav__child-link--parent{text-align: left !important;}
body ul#SiteNav ul.site-nav__childlist-grid > li li { padding-left: 0 !important;}
11

Hi, thanks for that but it didn’t change anything. The logo still disappears in the background. The photo I attached shows where the logo is but it’s still not black on collection pages