How to change header colour on one page

Hello! I want to have a transparent header on my homepage and a red header on every other page. However Squarespace doesn't allow that option. Could someone please help me with this? 

1 hour ago, kobe24 said:

Hello! I want to have a transparent header on my homepage and a red header on every other page. However Squarespace doesn't allow that option. Could someone please help me with this? 

Could you share your site url?

Sure, here it is (password:password) 

iris-flounder-6gzy.squarespace.com 

Add the following to Design > Custom CSS.

/* begin transparent background for header on homepage */

  body[data-menu-overlay-theme-switcher="true"].homepage .header.bright {
  
    background-color : transparent;
    
    }
    
  .homepage .header-title-logo {
  
    background-color : red;
    padding : 8px;
    
    }
    
  .homepage .header-nav-list {
  
    background-color : red;
    padding : 0.5em 0.75em
    
    }

  /* end transparent background for header on homepage */

This is for a v7.1 site.

Once the header background was transparent I made some quick styling decisions about how to get the logo and navigation to show up again.

Let us know how it goes.

Thanks so much, works like a charm 😃 Could you let me know how to do this on a different page? 

Post the URL for the other page and we'll see what we can do.