Jump to content

CSS working in editor but not live

Recommended Posts

  • Replies 4
  • Views 556
  • Created
  • Last Reply

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

 

 

Link to comment

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.

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.