Jump to content

Hamburger menu not working on homepage on mobile chrome

Go to solution Solved by HeidiK,

Recommended Posts


I am having issues with the hamburger menu on my squarespace homepage not working on mobile when using the chrome browser. It works on the laptop and on safari and on the other pages of the site just not on the homepage on the mobile when using chrome.


I have some customer CSS code which may be causing the problem or the HEADER CODE.  Both pasted below.

Please can someone help?


Here is the CSS CODE:


/* Dropdown Box */
.dropdown {
  margin-bottom: 3vw; /*spacing between boxes */

.dropdown h3 {
  font-size: 1.3rem; /*question font size */
  background: #dea2a7; /*box background colour */
  color: #000000 !important; /*question text colour*/
  padding: 10px;
  outline: #755A64 solid 3px; /*outline around box*/
  outline-offset: 2px; /*spacing between box and outline*/
  margin: auto 0px;
  cursor: pointer;

.dropdown p {
  font-style: italic; /* answer italic */

.answer {
  display: none;
  margin-top: 2vw; /*space between question and answer */
  border-left: #755A64 solid 1px; /* line beside answer */
  padding-left: 2vw; /*space between line and answer */

.dropdown h3:after {
  content: "\2193"; /* arrow */
  text-align: right;
  float: right;

/*Newsletter editing*/ 
// Email newsletter section
.newsletter-block {

  header {
    .newsletter-form-header-title { 
      // Styling the form title
      font-family: "Open Sans", sans-serif; //Main font family

    .newsletter-form-header-description {
      p { 
       // Styling the newsletter main text
        font-family: "Open Sans", sans-serif;
        font-size: 1.5em; // Size can be in px
        font-weight: 400;
        line-height: 1.2em;

  .newsletter-form-body {
    input.newsletter-form-field-element {
      // Styling the form input fields
      // including the "email" field
      min-width: 250px;
      font-family: "Open Sans", sans-serif;
      padding: 1rem !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      background-color: #dea2a7;
      letter-spacing: 1px;
      border-radius: 300px;
      text-align: center;

    @media screen and (min-width: 920px) {
      // Making sure the email field and the button
      // are better displayed on larger screens
      display: flex;
      flex-direction: row;
      // Below line sets the float of the form fields,
      // change value to flex-start to float left, flex-end to float right
      justify-content: center;

      .newsletter-form-button-wrapper {
        margin-left: 20px;


  // This hides the container for the form disclaimer
  // this part needs to be removed if you display
  // the disclaimer on your website
  .newsletter-form-footnote {
    display: none;

  // Styling the newsletter block button
  .newsletter-form-button-wrapper {
    // Full screen wide on mobile
    @media screen and (max-width: 768px) {
      width: 100%;

    .newsletter-form-button { 
      // Styling the button text and appearance
      min-width: 200px;
      font-family: "Open Sans", sans-serif  !important;
      text-align: center;
      padding: 1rem 3rem !important; // This controls how big the button is
      color: #dea2a7 !important; // Button text color
      background-color: #403939  !important; // Sign up button background colour
      text-transform: uppercase !important;
      border-radius: 300px;

      @media screen and (max-width: 768px) {
        padding: 1.5rem 0 !important;
        width: 100%;

      .newsletter-form-button-label {
        font-size: 1rem !important;
        font-weight: 600;
        letter-spacing: 1px;



<!-- ACCORDION FAQ h3 -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','crosshair');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>

<!-- Google Tag Manager /SW -->
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
<!-- End Google Tag Manager -->

<!-- Google Search Console /SW -->
<meta name="google-site-verification" content="e_2vPySdABGwHlG6zvAWKIW2a9XxPpBYfqUVHNcYX1k" />
<!-- End Google Search Console /SW -->


Edited by HeidiK
Include the homepage link
Link to comment

@HeidiK hmmmm when I test in both chrome and firefox, I'm having the same issue, just on the homepage in mobile. Inspecting the element, I can see that on all other pages, when the burger icon is clicked, there are classes being added and removed to the element that is changing the behavior. This is usually handled by javascript.

It's unlikely your CSS is interfering. I don't see any obvious errors in your javascript either... but something is definitely interfering with the javascript on the homepage only... this is a little out of my area of expertise, but I'd probably start troubleshooting by eliminating any other blocks on the homepage that are using javascript, for example the typing of "I do life coaching, retreats" etc in the top section, and maybe the scrolling text banner above the BOOK FREE DISCOVER CALL section and see if removing those activates the burger again? Something in their code might be interfering?

Link to comment
  • 3 weeks later...
  • Solution

Ok I've fixed it... it wasn't the banner or the typewriter script - as I removed both those and it still didn't work on mobile in Chrome... however after weeks of trying to solve this and trying all kinds of different code... This CSS code worked... in the Home page > settings > advanced > page header code injection. Thought I'd share here in case it is useful to anyone else 🙂 


<!-- Start cookieyes banner -->
    <script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/7a330dcd85c4da0176fd4bc1/script.js"></script>
    <!-- End cookieyes banner -->
#main-sidebar-container {
  z-index: 9998;

#sidecarNav {

.subnav {display: none !important;}

/*fix hamburger in chrome on mobile */
.hamburger span {
  display: block;
  width: 35px;
  height: 3px;
  margin: 6px auto;
  background-color: #333;
  transition: all 0.3s ease-in-out;

.hamburger.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-9px, 6px);

.hamburger.active span:nth-child(2) {
  opacity: 0;

.hamburger.active span:nth-child(3) {
  transform: rotate(45deg) translate(-8px, -8px);

/* display hamburger on small screen */
@media (max-width: 768px) {
  .hamburger {
    display: block;
    z-index 9999;

/* no hamburger on big screen */
@media (min-width: 769px) {
  .hamburger {
    display: none;

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.