Customizing the header only on homepage/

Site URL: https://www.bronzeville-foundation.com

Hello, I'm trying to do the following only on the front/home page:

1. Make my header background transparent

2. Make the color of the links and elements white 

3. Use a different logo

The attached picture is an example of what I'm going for, but when I go to my other pages you can't see anything since my pages are white and so are the links/logo.

2 hours ago, bronzeville said:

Site URL: https://www.bronzeville-foundation.com

Hello, I'm trying to do the following only on the front/home page:

1. Make my header background transparent

2. Make the color of the links and elements white 

3. Use a different logo

 

The attached picture is an example of what I'm going for, but when I go to my other pages you can't see anything since my pages are white and so are the links/logo.

Let's start with text and icon color

.homepage .header {
    background-color: transparent !important;
}
body.homepage .header-actions .icon--fill svg,
body.homepage .header-nav-wrapper a{
    fill: #fff !important;
  color: #fff !important;
}

For the logo you need to remove the white background first and upload the white version here

50 minutes ago, bangank36 said:

Let's start with text and icon color

.homepage .header {
    background-color: transparent;
}
body.homepage .header-actions .icon--fill svg,
body.homepage .header-nav-wrapper a{
    fill: #fff !important;
  color: #fff !important;
}

For the logo you need to remove the white background first and upload the white version here

Okay, in the editor window this does the trick and it shows the header as transparent but when I load the site through its url it looks white still.

updated the !important

Great! 

This works, now my next step is to have a separate logo for the home page (white) and for all other pages I want the bronze colored logo.

Can you list the steps for that?

Thanks in advance

29 minutes ago, bronzeville said:

Great! 

This works, now my next step is to have a separate logo for the home page (white) and for all other pages I want the bronze colored logo.

Can you list the steps for that?

Thanks in advance

Upload the bronze logo so it display on all pages and then post the white image here i will help

18 minutes ago, bangank36 said:

Upload the bronze logo so it display on all pages and then post the white image here i will help

Ok done. 

Side question, when I hover over about us, the panel background is white, is there any way I can change this to bronze (#BC380F) only on the homepage?

14 minutes ago, bronzeville said:

Ok done. 

Side question, when I hover over about us, the panel background is white, is there any way I can change this to bronze (#BC380F) only on the homepage?

hmm, is this the white logo you wanted

8 minutes ago, bangank36 said:

hmm, is this the white logo you wanted

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/6007b46ff931384d59d4f326/t/607a54f4c6223e23c5be2a39/1618629876903/WHITE+SITE+LOGO.PNGhttps://static1.squarespace.com/static/6007b46ff931384d59d4f326/t/607a54f4c6223e23c5be2a39/1618629876903/WHITE+SITE+LOGO.PNG");
  }
</style>

I inserted this into the home page's custom code and it changed the logo for the Home Screen only so it worked.

My only other concern is how to get this panel to be the bronze color (#BC308F) on the home page only. 

Right now it looks like the picture I attached and you can't see the options when you hover over About Us

look like you solve it

3 minutes ago, bangank36 said:

look like you solve it

Yes, sorry I don't mean to waste your time.

I appreciate your help and quick responses today