Jump to content

Hamburger icon on desktop

Recommended Posts

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;
}

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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>

Link to comment

What page is this on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
}

Link to comment

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 -->

Link to comment

And what happens when you remove the code?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.