Hamburger icon on desktop

Hello,

I have added a ccs code to my website so force hamburger menu icon on desktop. At first, it was working fine. But when I added a code block for a Wufoo form, the hamburger icon got distorter. It used to have 2 lines but now a single line is shown. Any advise how to fix this? Thank you 

Site: https://www.gosuperstars.co.uk/home-2

Password: Superstars2020!

Cheers,

Tristan

Hi @TrisGold what code are you using to force the mobile menu?

2 minutes ago, Ziggy said:

Hi @TrisGold what code are you using to force the mobile menu?

Hello Ziggy,

Below is the code I used.

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
  /* hide navigation */
    .header-nav {
    display: none;
}
  /* Hide header button */
    .header-actions {
    display: none;
}
    /* show burger */
    .header-burger {
      display: flex;
}
   .header-menu-bg {background: #36353A!important;}
  .header-menu-nav-item > a {color: white!important;}
  .header-menu-nav-item {line-height: 40px!important;}
    .header-menu-nav {text-align: centre!important; margin-left: -3%!important;}

  
  
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
 
}
}

@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}
}

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: #D3075E !important;
}

@Ziggy Since I've added the Wufoo form the animated SVG stars have also been distorted. It animates on Safari but doesn't work on Chrome.

It sounds like you have an error in the Wufoo code, can you share that so I can check it? How have you implemented it?

Hi Ziggy, thanks for your reply. Below is the Wufoo code. I have added as squarespace has suggested—it was added by inserting a code block.

<iframe height="525" title="Embedded Wufoo Form" allowtransparency="true" frameborder="0" scrolling="no" style="width:125%;border:none" sandbox="allow-popups-to-escape-sandbox allow-top-navigation allow-scripts allow-popups allow-forms allow-same-origin" src="https://stevestar.wufoo.com/embed/zlf9xz70k7de3k/"> <a href="https://stevestar.wufoo.com/forms/zlf9xz70k7de3k/">Fill out my Wufoo form!</a> </iframe>

What page is this on?

15 hours ago, Ziggy said:

What page is this on?

Helly Ziggy, the form is on Talent Supertars: https://www.gosuperstars.co.uk/talent-superstars

I can't see what's causing the problem, but the script you are using for the stars does seem to be running. Does removing the form fix them?

Hi Ziggy, I have tried that — removing the form — but still not solving the issue.

6 minutes ago, TrisGold said:

removing the form

Okay, so the form is probably not the issue.

Have you got anything else in the CSS or code injection? You'll probably want to remove everything and then systematically replace the code to see what works and what might be causing the problem.

Here are the other css codes, i used

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
  /* hide navigation */
    .header-nav {
    display: none;
}
  /* Hide header button */
    .header-actions {
    display: none;
}
    /* show burger */
    .header-burger {
      display: flex;
}
   .header-menu-bg {background: #36353A!important;}
  .header-menu-nav-item > a {color: white!important;}
  .header-menu-nav-item {line-height: 40px!important;}
    .header-menu-nav {text-align: centre!important; margin-left: -3%!important;}

  
  
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
 
}
}

@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
}
}

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: #D3075E !important;
}

// Highlighted Field Form // 

.field-list .field-element:focus, .field-element:visited{
    border-color: #D30F5E !important;
  }
  .field-list select:focus{
    outline-color:  #D30F5E !important;
  }
  .field-list .section{
    border-color: #D30F5E !important;
  }
  .form-button-wrapper .button{
    color: white !important;
    border-color: transparent;
    background-color: #D30F5E;
  }
  .form-button-wrapper .button:hover{
    color: white !important;
    background-color: #000000 !important;
  }

html.squarespace-damask .sqs-blockStatus {
    display: none !important;
}

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

// Remove Hyperlink Line - v7.1 //

.sqs-block-html a {
  text-decoration: none !important;
  background-image: none !important;
}

#block-yui_3_17_2_1_1684400353602_10559
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

#block-55ca7cf3810054155bd8
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

#block-fcaed1dda0e0bc7e63b6
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

#block-c24f9abbf7193b5c03d7
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

#block-ac012a0117a62a0ba857
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

#block-687ba663920e20842c68
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

#block-687ba663920e20842c68
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}
* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

And the code injection:

<!-- Parallax effect for Image Block with Overlap or Collage Design -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var textContainers = [].slice.call(document.querySelectorAll('.sqs-block-image .design-layout-overlap .sqs-dynamic-text-container, .sqs-block-image .design-layout-collage .sqs-dynamic-text-container'));
  textContainers.forEach(function(container) { container.classList.add('rellax-image-block'); });
  new Rellax('.rellax-image-block', { speed: 2, center: true });
});
</script>
<!-- end Parallax effect for Image Block with Overlap or Collage Design -->

And what happens when you remove the code?

1 hour ago, TrisGold said:

<!-- Parallax effect for Image Block with Overlap or Collage Design -->

This code is outdated and not compatible with the latest version of Squarespace with the grid editor (fluid engine) since there are not longer these image block types.

Hi Ziggy,  

This is now sorted! I have deleted all the codes and installed fresh ones.

My issue now though is how to customise the wufoo form, particularly with Submit button, so it is consistent with the other buttons within the site. Please advise.

https://www.gosuperstars.co.uk/talent-superstars

PW: Superstars2020!

Thank you,

Tristan

It's an iFrame, so the content is hosted and styled externally. You may well need to adjust this style on Wufoo, have you explored doing that?