Hamburger menu not working on homepage on mobile chrome

Hi,

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.

https://www.drheidikharbhih.com/

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

Here is the HEADER CODE INJECTION:

 

<!-- 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>
<!-- END ACCORDIAN FAQ -->

<!-- Google Tag Manager /SW -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WLB6QWSQ');</script>
<!-- End Google Tag Manager -->

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

 

Edited November 8, 2023 by HeidiK
Include the homepage link

@HeidiK can you include a link to the page you're having trouble with?

@SaranyaDesigns
 

Ah sorry for not including the homepage, here it is… 

https://www.drheidikharbhih.com/

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