Mail icon bounces with an error message - issue with CSS code

Hey everyone,

I hope you'll be able to help. I've taken over on helping this client and my predecessor added some CSS code - some of which is broken now :/

The email icon brings up an error message rather than open the 'new email' window in your mail app. The email icon used to bring up the contact box that's in the footer (and is still working in the footer). It seems the URL is wrong in the top.

In the header it leads to: https//yostudios.yogo.dk/frontend/index.html#/my-profile

In the footer it leads to: https://yostudios.dk/dk/home#l-dk-kontakt-os

I believe the "l" in the second URL stands for lightbox - which might be something my predecessor added to the design.

I was in touch with Squarespace to troubleshoot and when they disable the CSS the mail icon lets you send email. So the problem is with the CSS code.

Squarespace suggested I try and remove each bit of code and see which one is causing the issue. However, none of the bits of code seem to be connected to that particular part. Maybe one of you can see where the issue is?

Ideally, I'll find a way to have the contact formular pop up in the header like it does in the footer. But otherwise at this point I'm happy to just have it send emails, haha.

Bonus info (might help?!):

If I remove the mail icon in Social Links the icon of our wee 'person' icon changes to the envelope instead. If I then add the mail again, the two icons have swapped around.

I'm lost and will be eternally grateful if anyone can help. I'm new to the world of CSS and Squarespace forum so if this is in the wrong format or place I apologise. I've attached the CSS code to this post below.

- Emilie

 

CSS code:

//Font

@font-face { 

font-family: Gotham-Book;

src: url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/60d5c911323652504da52d20/1624623377357/GothamBook+Regular.otf);

} 

@font-face {

font-family: Gotham-Bold;

src: url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/60598b68a315380888caba90/1616481128984/Gotham-Bold.otf);

}

@font-face {

font-family: Plantin-bold; 

src: url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/60b5ff0f4d872516fe382807/1622540048186/PlantinMTProBold.TTF);

}

@font-face {

font-family: Plantin-boldit;

src: url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6040cad4078e2269c958333b/1614858965277/PlantinMTProBoldIt.TTF);

}

@font-face {

font-family: Gotham-light;

src: url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6040c9a3122f3e7655fbc533/1614858659439/Gotham-Light.otf);

}

 

 

//Fjerner understreg ved links

a {

text-decoration: none !important;

}

 

div.header-menu-nav-folder-content{

  font-family:Gotham-Book!important;

}

.header-menu-nav-item {

  font-family:Gotham-Book!important;

}

 

element.style {

}

.header-menu .header-menu-nav a:not(.btn) {

    color: #fff;

}

.header-menu-nav-item a {

    position: relative;

    display: block;

    margin: .7vw 5vw;

    transition: opacity 250ms cubic-bezier(.4,0,.2,1);

      font-size: 25px!important;

  line-height:11px!important;

}

.header-menu a {

    opacity: 1;

}

@media screen and (max-width:550px){

.header-menu-nav-item a {

      font-size: 23px!important;

  line-height:17px!important;

}

}

 

h1.blog-title, p, h1 {

font-family:Gotham-Book !important;

}

 

h2{

  font-family: Gotham-Book;

  font-size:16px!important;

}

h3, h4{

  font-family: Plantin-boldit!important;

} 

  

//Fjerne understreg ved links

a {

text-decoration: none !important;

}

 

div.header-menu-nav-folder-content{

  font-family:Gotham-Book!important;

}

.header-menu-nav-item {

  font-family:Gotham-Book!important;

}

 

element.style {

}

.header-menu .header-menu-nav a:not(.btn) {

    color: #fff;

}

.header-menu-nav-item a {

    position: relative;

    display: block;

    margin: .7vw 5vw;

    transition: opacity 250ms cubic-bezier(.4,0,.2,1);

      font-size: 25px!important;

  line-height:11px!important;

}

.header-menu a {

    opacity: 1;

}

@media screen and (max-width:550px){

.header-menu-nav-item a {

      font-size: 23px!important;

  line-height:17px!important;

}

}

 

h1.blog-title, p, h1 {

font-family:Gotham-Book !important;

}

 

h2{

  font-family: Gotham-Book;

  font-size:16px!important;

}

h3, h4{

  font-family: Plantin-boldit!important;

}

 

//Font på knap 

a.sqs-block-button-element{

  font-family:Gotham-Book!important;

  

}

a.sqs-block-button-element--small.sqs-block-button-element:hover{

color:black!important;

}

 

 

//social icons på underviserprofiler 

.teachericon{

  display:flex;

justify-content: center;

  align-items: center;

}

.spotify{

  display: inline-block;

 

  flex: 33.33%;

  height:22px;

  margin:5px;

  width:22px;

  padding:5px;

   background-image:url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/60d9923286c90020e13f478b/1624871474752/IKON_SPOTIFY_teacher.png);

        background-size: 100%;

        background-repeat: no-repeat;

}

.spotify:hover{

  opacity:0.7;

}

.instagram{

  display: inline-block;

  flex: 33.33%;

  height:22px;

  margin:5px;

  width:22px;

  padding:5px;

   background-image:url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/60d9922c70b518626efd0628/1624871468924/IKON_INSTA_teacher.png);

        background-size: 100%;

        background-repeat: no-repeat;

}

.instagram:hover{

  opacity:0.7;

}

.facebook{

  display: inline-block;

  flex: 33.33%;

  height:22px;

  margin:5px;

  width:22px;

  padding:5px;

   background-image:url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6090e401038d02107923f0e7/1620108289390/IKON_FACE.png);

        background-size: 100%;

        background-repeat: no-repeat;

}

.facebook:hover{

  opacity:0.7;

}

 

//WEB teacher ikon

.web{

  display: inline-block;

  flex: 33.33%;

  height:22px;

  margin:5px;

  width:22px;

  padding:5px;

   background-image:url(https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/60d99237812eb32b39db3751/1624871479959/IKON_WEB_teacher.png);

        background-size: 100%;

        background-repeat: no-repeat;

}

.web:hover{

  opacity:0.7;

}

 

 

//Burger på mobil, samt en mindre fixed quote

@media screen and (max-width:550px){

.page-section {border:7px solid transparent}

div.stickylink{

  position:fixed; 

  width: 170px;

  bottom: 5px;

  right: 5px;

  height:170px;

  border-radius: 50%;

  opacity: 0.9;

  z-index:900;

  }

    } 

 

//Header links hover color

.header a:hover {

    opacity: 0.7;

}

 

 

//pil farve picker

.md-icon.md-theme-default.md-icon-image svg {

  fill:white!important;

}

 

//tekstfarve i picker

.yogo-widget .md-field.md-theme-default.md-focused .md-input, .yogo-widget .md-field.md-theme-default.md-focused .md-textarea, .yogo-widget .md-field.md-theme-default.md-has-value .md-input, .yogo-widget .md-field.md-theme-default.md-has-value .md-textarea {

    -webkit-text-fill-color: white!important;

}

div.md-field.md-theme-default.md-has-value::before{

 background-color:white!important;

}

  div.theme--frame-box{

    background-color:inherit;

  }

.yogo-widget .btn.underline.fr.mb20 {

  border: none;

}

 

.yogo-widget .cal-top.sticky {

  color: #333;

}

 

.yogo-widget .current-day .cal-top {

  color: #fff;

}

 

.yogo--h1 {

  line-height: 2;

}

 

.yogo-modal-content p {

  line-height: 1.4;

}

 

.md-dialog-actions .yogo-btn.yogo-btn-primary {

  padding-top: 18px;

}

 

.md-dialog-container,

.yogo-btn{

  line-height: 1.2;

 

}

 

.header__logo--client .text--gray.pointer {

  display: inline-block;

}

 

.md-list-item-text {

  line-height: 2 !important;

}

 

.md-datepicker-dialog .md-button .md-button-content {

  background: transparent;

  border: 0;

}

 

.md-datepicker-month {

  top: 18px !important;

}

 

.md-datepicker-body-footer button {

  background: transparent !important;

  padding: 10px 0px 5px 7px;

}

 

.sqs-block-accordion a {

 border: 2px solid #fff;

 background: ;

 color: #333;

 padding: .8rem 

}

 

.sqs-block-accordion a:hover {

 border: 2px solid #fff;

 background: #; 

} 

 

 

//hvid hamburger menu + navigation tekst

body.header--menu-open .burger-inner>div {

    background-color: white !important;

}

 

.header-menu-nav-item * {

color: white !important;

}

 

body:not(.header--menu-open) .burger-inner>div {

    background-color: white !important;

}

 

 

//Laver ens border i omkring video på computer, samt fixed quote

@media screen and (min-width:550px){

 

.page-section {border:7px solid transparent}

div.stickylink{

  position:fixed;

  width: 320px;

  bottom: 0px;

  right: 0px;

  height: 320px;

  border-radius: 50%;

  opacity: 0.9;

  z-index:900;

  }

}

 

 

//Video on mobile

.sqs-video-background.custom-player-wrapper {

  min-height: ~'calc((.56 * 100vw) + 0.5px)';

  min-width: ~'calc((var(--player-height) * 1.78) + 0.5px)';

  top: 50%;

  left: 50%;

  bottom: auto;

  right: auto;

  transform: translate3d(-50%,-50%,0) perspective(1px);

  .custom-player {

    position: absolute;

    top: 0;

    left: 0;

    height: ~'calc(100% + 0.5px)';

    width: ~'calc(100% + 0.5px)';

    transition: opacity .2s .2s ease-in;

  }

  iframe:not(.custom-player) {

    opacity: 0 !important

  }

}

 

 

//transparente knapper i Safari & Mobileview

 

//nyhedsbrev knap i footer

section[data-section-id="63ac27d3996608ec705518d4"]{

.sqs-button-element--primary {

  border: solid 1px white !important;

  background: transparent !important;

  color: white !important;

}  

  }

 

//transparente knapper i Safari & Mobileview på hele siden

.sqs-button-element--primary {

  border: solid 1px white !important;

  background: transparent !important;

  color: white !important;

}

 

 

//beige baggrundsfarve + hvid font i alle lightboxes

.c-lightbox__content-inner{

background-color:#BEAE84!important;

  border:solid!important;

  border-width:7px!important;

  border-color:white!important;

}

.fancybox-button.fancybox-close-small.c-lightbox__close{

  color:white!important;

}

/* Mobil */

@media screen and (max-width:767px) {

.c-lightbox__content {

    max-width: 100% !important;

}

}

/* Tablet */

@media screen and (min-width:768px) and (max-width:1023px) {

.c-lightbox__content {

    max-width: 70% !important;

}

}

/* Computer */

@media screen and (min-width:1024px) {

.c-lightbox__content {

    max-width: 60% !important;

}

}

 

// Alt YOGO-layout

 

//Holdplan, booking mv.(DK)

[data-section-id="608f056e6152873708e9694f"]{

  .md-menu.md-select{

  border-color:white!important;

  border:2px solid!important;

}

.md-field:after{

  background-color:white!important;

}

  

  

  //pil farve picker

.md-icon.md-theme-default.md-icon-image svg {

  fill:white!important;

}

  

  

//tekstfarve i picker

.yogo-widget .md-field.md-theme-default.md-focused .md-input, .yogo-widget .md-field.md-theme-default.md-focused .md-textarea, .yogo-widget .md-field.md-theme-default.md-has-value .md-input, .yogo-widget .md-field.md-theme-default.md-has-value .md-textarea {

    -webkit-text-fill-color: white!important;

}

div.md-field.md-theme-default.md-has-value::before{

 background-color:white!important;

}

  div.theme--frame-box{

    background-color:inherit;

  }

}

.yogo-widget .btn.underline.fr.mb20 {

  border: none;

}

 

.yogo-widget .cal-top.sticky {

  color: #333;

}

 

.yogo-widget .current-day .cal-top {

  color: #fff;

}

 

.yogo--h1 {

  line-height: 2;

}

 

.yogo-modal-content p {

  line-height: 1.4;

}

 

.md-dialog-actions .yogo-btn.yogo-btn-primary {

  padding-top: 18px;

}

 

.md-dialog-container,

.yogo-btn{

  line-height: 1.2;

 

}

 

.header__logo--client .text--gray.pointer {

  display: inline-block;

}

 

.md-list-item-text {

  line-height: 2 !important;

}

 

.md-datepicker-dialog .md-button .md-button-content {

  background: transparent;

  border: 0;

}

 

.md-datepicker-month {

  top: 18px !important;

}

 

.md-datepicker-body-footer button {

  background: transparent !important;

  padding: 10px 0px 5px 7px;

}

 

.sqs-block-accordion a {

 border: 2px solid #fff;

 background: ;

 color: #333;

 padding: .8rem 

}

 

.sqs-block-accordion a:hover {

 border: 2px solid #fff;

 background: #; 

} 

 

 

//Holdplan, booking mv.(EN)

section[data-section-id="639af6f8de9bc76eefc21e38"]{

  .md-menu.md-select{

  border-color:white!important;

  border:2px solid!important;

}

.md-field:after{

  background-color:white!important;

}

  

  

  //pil farve picker

.md-icon.md-theme-default.md-icon-image svg {

  fill:white!important;

}

  

  

//tekstfarve i picker

.yogo-widget .md-field.md-theme-default.md-focused .md-input, .yogo-widget .md-field.md-theme-default.md-focused .md-textarea, .yogo-widget .md-field.md-theme-default.md-has-value .md-input, .yogo-widget .md-field.md-theme-default.md-has-value .md-textarea {

    -webkit-text-fill-color: white!important;

}

div.md-field.md-theme-default.md-has-value::before{

 background-color:white!important;

}

  div.theme--frame-box{

    background-color:inherit;

  }

}

.yogo-widget .btn.underline.fr.mb20 {

  border: none;

}

 

.yogo-widget .cal-top.sticky {

  color: #333;

}

 

.yogo-widget .current-day .cal-top {

  color: #fff;

}

 

.yogo--h1 {

  line-height: 2;

}

 

.yogo-modal-content p {

  line-height: 1.4;

}

 

.md-dialog-actions .yogo-btn.yogo-btn-primary {

  padding-top: 18px;

}

 

.md-dialog-container,

.yogo-btn{

  line-height: 1.2;

 

}

 

.header__logo--client .text--gray.pointer {

  display: inline-block;

}

 

.md-list-item-text {

  line-height: 2 !important;

}

 

.md-datepicker-dialog .md-button .md-button-content {

  background: transparent;

  border: 0;

}

 

.md-datepicker-month {

  top: 18px !important;

}

 

.md-datepicker-body-footer button {

  background: transparent !important;

  padding: 10px 0px 5px 7px;

}

 

.sqs-block-accordion a {

 border: 2px solid #fff;

 background: ;

 color: #333;

 padding: .8rem 

}

 

.sqs-block-accordion a:hover {

 border: 2px solid #fff;

 background: #; 

}

 

 

//fixed quote aka. 'we are here to move you' nederst på siden

@media screen and (min-width:550px) {

  .stickylink {

  position:fixed;

  bottom: 0px;

  right: 0px;

  opacity: 0.9;

  z-index:900;

  }

  .stickylink img {

    width:320px;

    height:320px

  }

}

 

OP here:

Here's some more code from the header I found:

<html>
  <div class="stickylink">
    <img src="https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6059853c3ca5ae3b260b169e/1616479548490/YO_QUOTE_OUT_WHITE+(1).png">
  </div>
</html>

Do you still need help?

Yes, please, if you're able to?