How do I change the navigation bar background color for the homepage only?

Site URL: http://jscagsupply.squarespace.com

How do I change the navigation bar background color for the homepage only? I want the homepage navigation bar background color to be different than the rest of the pages. Can you please help me with this?

pw is testing123.

Thanks!

17 minutes ago, noodles22 said:

Site URL: http://jscagsupply.squarespace.com

How do I change the navigation bar background color for the homepage only? I want the homepage navigation bar background color to be different than the rest of the pages. Can you please help me with this?

pw is testing123.

 

Thanks!

.homepage .header.white {
    background-color: #e1e6a9 !important;
}

You can use this custom css

.homepage .header.white {
    background-color: #e1e6a9 !important;
}

13 minutes ago, bangank36 said:

.homepage .header.white {
    background-color: #e1e6a9 !important;
}

You can use this custom css

.homepage .header.white {
    background-color: #e1e6a9 !important;
}

This was perfection! Thank you so much!

is there a code to apply this to the entire site? when my pages load, they load with a grey background before changing to my set color.

13 hours ago, Darrenmsp said:

is there a code to apply this to the entire site? when my pages load, they load with a grey background before changing to my set color.

try this

Quote

.header{ background-color: #e1e6a9 !important; }

On 1/5/2021 at 6:14 AM, tuanphan said:

try this

 

thx for replying but that didnt do it.

16 hours ago, Darrenmsp said:

thx for replying but that didnt do it.

Try this CSS

.header .header-announcement-bar-wrapper {
    background: red !important;
}

do any of you know how to change the navigation color on just one page. I want it white on the home page, and black on all the other tabs. Please lmk!

@BrookeSansone

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon

https://wrasse-maracas-c2pc.squarespace.com/

password: test

I want Portfolio, About, Press, my social icons and the contact button white on the home page.

Then I want Portfolio, About, Press, my social icons and the contact button black on every other page so you can see it. 

@BrookeSansone

I suggest making the default color for the text and other bits black for the header using the SS interface.

Then we can give the code turning them white on the home page.

The idea is to choose a default color (black) that will cover the most number of pages and then write CSS to change the homepage only, instead of the other way around, which may require more CSS.

@creedon

perfect! I made it black, will you help me write CSS for the white navigation on the home page please!

Add the following to Design > Custom CSS.

/*

  begin home page header navigation white
  
  Version     : 0.1d1
  
  SS Version  : 7.1
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  body.homepage:not( .header--menu-open ) .header-nav-wrapper a,
  .homepage.primary-button-style-outline .header-actions .btn
  
    {
    
      color : white;
      
      }
      
  .homepage.primary-button-style-outline .header-actions .btn {
  
    border-color : white;
    
    }
    
  .homepage.primary-button-style-outline .header-actions .btn:hover {
  
    background-color : white;
    color : black;
    
    }
    
  body.homepage:not( .header--menu-open ) .header-actions .icon--fill svg {
  
    fill : white;
    
    }
    
  /* end home page header navigation white */

Let us know how it goes.

@creedon

it made everything white besides the instagram and facebook logo.

@creedon

also, it will be white on the home page, then when i click portfolio it's black (which i want), but then when i click back to the home page its black again.

I have updated my code post.

On 12/8/2020 at 1:51 PM, bangank36 said:

.homepage .header.white {
    background-color: #e1e6a9 !important;
}

You can use this custom css

.homepage .header.white {
    background-color: #e1e6a9 !important;
}

Hey there! Having trouble applying this to my site. I'd like the homepage menu to have a 0.2 or so transparent black background, and the other pages to have the solid blue that they have currently. Can you take a look please? Thanks!

Site mock: https://pigeon-maracas-9ccm.squarespace.com/ 
Password: happy2021

35 minutes ago, travisandrew said:

Hey there! Having trouble applying this to my site. I'd like the homepage menu to have a 0.2 or so transparent black background, and the other pages to have the solid blue that they have currently. Can you take a look please? Thanks!

Site mock: https://pigeon-maracas-9ccm.squarespace.com/ 
Password: happy2021

 

My testing result

Try adding to your Home > Design > Custom Css

.homepage  .header-background-solid {
  background-color: rgba(94,152,177,0.2) !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

On 12/8/2020 at 11:33 AM, noodles22 said:

On 12/12/2021 at 10:42 PM, bangank36 said:

My testing result

Try adding to your Home > Design > Custom Css

.homepage  .header-background-solid {
  background-color: rgba(94,152,177,0.2) !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Hi! Im looking to have this navigation colour page only on my products shopping page, rather than the home page. I would like the banner to be teal, not white. Can you help? 

https://primitivek9.com/shop/p/pink-leopard-bow-tie

On 9/6/2022 at 1:54 AM, BethH said:

 

Add to Design > Custom CSS

body[class*="type-products"].view-item header#header {
    background-color: teal !important;
}