Jump to content

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

Recommended Posts

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

Schermafbeelding 2020-11-10 om 19.39.26.png

header.thumb.png.00e2ae87cb9800e04eb37f54eee1cbdd.png

Link to comment
  • Replies 4
  • Views 361
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.