navigation header 50% transparant black, shop collection on homepage white background

Site URL: https://sealion-guitar-cn6h.squarespace.com/config/pages

hi there,

I would like to change my header. I would like to make two changes:

-making the header around 50% transparant with the big image behind it
-make the header visible when you scroll up.

And I would like to change the background of the page on the homepage ' shop the collection and the shop page background to white. 

I made  a picture of the site and header that I like from another brand.  Can you please help me with that? I have no experience in using custom css. 

Password: Test1234

Thanks

Add the following to Design > Custom CSS.

/* begin semi-transparent and fixed header */

  @media screen and ( min-width: 641px ) {
  
    /* order of rule-sets is important */
    
    .sqs-announcement-bar-dropzone,
    .Header--top
    
      {
      
      position: fixed;
      width: 100%;
      z-index: 99;
      
      }
      
    .sqs-announcement-bar-dropzone {
    
      top: 0;
      
      }
      
    .Header--top {
    
      background: rgba( 0, 0, 0, 0.5 );
      top: 36px;
      
      }
      
    .Header-inner--top {
    
      padding-bottom: 36px;
      
      }
      
    .Site-inner {
    
      margin-top: 225px;
      
      }
      
    .homepage .Site-inner {
    
      margin-top: 36px;
      
      }
    }
    
  /* end semi-transparent and fixed header */

Add the following to Index Settings > Advanced > PAGE HEADER CODE INJECTION.

<style>

  #new-page-1 {
  
    background-color: white;
    color: black;
    
    }
    
  </style>

Add the following to Store Settings > Advanced > PAGE HEADER CODE INJECTION.

<style>

  .Intro, .Main--products-list, .Main--products-item {
  
    background-color: white;
    color: black;
    
    }
    
  </style>

Let us know how it goes.

hi creedon,

Thanks a lot. Everything works perfect. Only the header is now a little bit to much transparant. I would like it a bit more/ less transparant. Is that possible?

Bobbie

13 hours ago, bobbie said:

Only the header is now a little bit to much transparant. I would like it a bit more/ less transparant. Is that possible?

In Design > Custom CSS look for the following line.

background: rgba( 0, 0, 0, 0.5 );

From W3Schools CSS RGB Colors...

Quote

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

The alpha parameter is the last number, in this case 0.5. If you want less transparency then increase the 0.5. Try 0.7 or 0.8. See how it goes.

Works perfectly, Thanks!