CSS working in editor but not live

Site URL: http://www.georgiahicks.com

Hi, 

The code for my website is working fine in editor, however when it's live the transparency doesn't work. 

May I ask for your advice with this?

The password to access the site is "portfolio123".

Thank you.

Would you kindly provide further details as to what elements you are are trying to code, what the desired effects would be, what is currently happening, as well as posting the code that you are using on your site so that other developers can investigate further.

Hi Molto, 

Thanks for your response. The desired effects is to have a transparent background for the navigation bar, so that the text scrolls directly over the images behind them. I would like the same effect as this website (https://mischaappel.com/). 

The nav bar is currently staying white when published. 

The code for the website is:

/* Font Selection */
@font-face {
  font-family: UniversLtd;
  src: url(https://static1.squarespace.com/static/5f5952ab6dd489090c6e29b5/t/5f5e6066a6a3fc6ccb114800/1600020583386/UniversLTStd.otf);
}

@font-face {
  font-family: UnvrsLight;
  src: url(https://static1.squarespace.com/static/5f5952ab6dd489090c6e29b5/t/5f63d13d02499970834e4213/1600377151604/Univers-light-normal.ttf);
}

.Header-nav--primary .Header-nav-item {
    font-family: UniversLtd;
    letter-spacing: 1.0px !important;
  ;
}

.Header-nav--secondary .Header-nav-item{
    font-family: UniversLtd;
    letter-spacing: 1.0px !important;
  
  
}

@font-face {
  font-family: celesse;
  src: url(https://static1.squarespace.com/static/5f5952ab6dd489090c6e29b5/t/5f5e6066a6a3fc6ccb114800/1600020583386/UniversLTStd.otf); 
}
a.Header-branding, a.Mobile-bar-branding {
    font-family: celesse !important;
 
}

.Header-inner { z-index: 8; width: 100%; }

.Header{ z-index: 5; position: fixed; width: 100%;
background: #ffffff00;
}

html:not([data-scroll='0']) {
  header {         
      box-shadow: 0 0 .5em );
    }    
.Header--bottom.Header--overlay {
    background: #ffffff00;     
    position: fixed;

  } 
}  

header {     
    padding-top: 7.5em;
    padding-bottom: 1.5em;
    
}

h2 {font-family: 'UnvrsLight';
  font-size: 14.5pt;
  letter-spacing: .7px;
  line-height: 147%; 
  color: #3b3b3b;
  a:hover {color: #ffd1dc}
  a{border-bottom-style: none !important;}
  
}

h3 {font-family: 'UniversLtd';
  font-size: 8.3pt;
  letter-spacing: .55px;
  line-height: 147%; 
  color: #838383;
}

/* Desktop Title */
a.Header-branding {
    font-size: 11px !important;
    letter-spacing: 1.0px !important;
  
  
}
/* Mobile Title */
a.Mobile-bar-branding {
    font-size: 50px !important;
    letter-spacing: 1.0px !important;
}

/*Remove minimum spacer-block height*/
.spacer-block {
   padding-top: 0;
   padding-bottom: 0 !important;
}

.spacer-block .sqs-block-content {
   line-height: 0.0em;
}

.sqs-layout.sqs-editing .spacer-block {
   min-height: 0;
}
/*End remove spacer-block height*/

/* Add this first bit to get more flexibility in height. */
.sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content {
    min-height: 0px !important;
}
.sqs-block-spacer .sqs-block-content {
  height: 0;
}

/* Add this second bit too if you want to be able to go to zero. */
.sqs-block-spacer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Nav item color */
.Header-nav-item {
    color: #838383
      !important;
}
/* Nav item hover color */
.Header-nav-item:hover {
    color: #96D617 !important;
}
/* Nav item active color */
.Header-nav-item--active {
    color: #838383 !important;
}

Thanks for your help!

Georgia

Have you solved this yet?

If you change the background line in the following rule set.

.Header{ z-index: 5; position: fixed; width: 100%;
background: #ffffff00;
}

To the following.

background: transparent;

That should do the trick for a transparent header.

Let us know how it goes.