Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS working in editor but not live


GeorgiaHicks

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

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.

Link to post
  • 0

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 post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...