Hamburger menu does not appear on desktop fullscreen

Hey folks.

I was editing my SquareSpace page a few hours ago, and must've accidentally edited something. Because now clicking the Hamburger icon on my webpage no longer reveals its menu unless I'm the page size is about half the screen-size.

As you can see in the image below, if I minimize the screen while in config mode, the Hamburger's menu appears as it should. But once I expand the page, the hamburger menu disappears and cant be re-opened.

If I click on the hamburger icon, it does turns into an "X", but the hamburger menu does does not reveal itself.

It seems like it has something do with screen size?

In any case, is someone willing to help out? This is bit time-sensitive for me so a fast response would be greatly appreciated., 

Can you share your website URL so I can take a look at what's going on? Thanks!

https://www.michaelaguocha.com/

That is very odd behaviour. What code solution did you use for the desktop hamburger menu?

dumb question. But where would that be that again? I forgot where that would be placed.

Under Settings -> Advanced -> Code Injection

All my Header page code

<style>
*{
  /*========DISABLE RIGHT CLICK START===========*/
 -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none;   /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
-moz-user-select: none;      /* Firefox */
-ms-user-select: none;       /* IE 10+ and Edge */
 
  }
</style>
<script type="text/JavaScript">
    var message="Right Click Disabled";
    function defeatIE() {if (document.all) {(message);return false;}}
    function defeatNS(e) {if 
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers) 
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;}
    else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;}
    document.oncontextmenu=new Function("return false")
   /*========DISABLE RIGHT CLICK END===========*/
    </script>

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<div class="scrollprogressContainer">
        <div class="scrollprogressBar">
        </div>
</div>
<style>
    /*========================== TOP SCROLL BAR (start from script) ===================*/
.scrollprogressContainer {
  left:0;
  width: 100%;
  height: 2px;
  margin-bottom: 0px;
  position: fixed;
  top: 0px;
  overflow: hidden;
  background-color: black;
  content: "";
    display: table;
    table-layout: fixed;
  z-index: 999999;
}
.scrollprogressBar {
  width: 0%;
  float: left;
  height: 2px;
  z-index:99999;
  max-width: 100%;
  background-color:#738AAE;
}
   /*========================== TOP SCROLL BAR (end at script) ===================*/
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(window).load(function(){
  $(window).scroll(function() {
    var wintop = $(window).scrollTop(), docheight = $('body').height(), winheight = $(window).height();
    console.log(wintop);
    var totalScroll = (wintop/(docheight-winheight))*100;
    console.log("total scroll" + totalScroll);
    $(".scrollprogressBar").css("width",totalScroll+"%");
  });
});
</script>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  /*========================== SWIPE START ===================*/
$(document).ready(function($){

  var animationDelay = 2500,
  barAnimationDelay = 3800,
  barWaiting = barAnimationDelay - 3000,
  lettersDelay = 50,
  typeLettersDelay = 150,
  selectionDuration = 500,
  typeAnimationDelay = selectionDuration + 800,
  revealDuration = 600,
  revealAnimationDelay = 1500;
  
  initHeadline();
  
  function initHeadline() {
    singleLetters($('.sp-headline.letters').find('b'));
    animateHeadline($('.sp-headline'));
  }
  
  function singleLetters($words) {
    $words.each(function(){
      var word = $(this),
      letters = word.text().split(''),
      selected = word.hasClass('is-visible');
      for (i in letters) {
        if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
        letters[i] = (selected) ? '<i class=“in”>' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
      }
      var newLetters = letters.join('');
      word.html(newLetters).css('opacity', 1);
    });
  }
  
  function animateHeadline($headlines) {
    var duration = animationDelay;
    $headlines.each(function(){
      var headline = $(this);
      
      if(headline.hasClass('loading-bar')) {
        duration = barAnimationDelay;
        setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
      } else if (headline.hasClass('clip')){
        var spanWrapper = headline.find('.sp-words-wrapper'),
        newWidth = spanWrapper.width() + 10
        spanWrapper.css('width', newWidth);
      } else if (!headline.hasClass('type') ) {
        var words = headline.find('.sp-words-wrapper b'),
        width = 0;
        words.each(function(){
        var wordWidth = $(this).width();
      if (wordWidth > width) width = wordWidth;
    });
      headline.find('.sp-words-wrapper').css('width', width);
      };
      
      setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
    });
  }
  
  function hideWord($word) {
    var nextWord = takeNext($word);
    
    if($word.parents('.sp-headline').hasClass('type')) {
    var parentSpan = $word.parent('.sp-words-wrapper');
    parentSpan.addClass('selected').removeClass('waiting');
    setTimeout(function(){
    parentSpan.removeClass('selected');
    $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
    }, selectionDuration);
    setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
    
    } else if($word.parents('.sp-headline').hasClass('letters')) {
    var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
    hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
    showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
    
    }else if($word.parents('.sp-headline').hasClass('clip')) {
    $word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
    switchWord($word, nextWord);
    showWord(nextWord);
    });
    
    } else if ($word.parents('.sp-headline').hasClass('loading-bar')){
    $word.parents('.sp-words-wrapper').removeClass('is-loading');
    switchWord($word, nextWord);
    setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
    setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
    
    } else {
    switchWord($word, nextWord);
    setTimeout(function(){ hideWord(nextWord) }, animationDelay);
    }
  }
  
  function hideLetter($letter, $word, $bool, $duration) {
    $letter.removeClass('in').addClass('out');
    
    if(!$letter.is(':last-child')) {
     setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
    } else if($bool) {
     setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
    }
    
    if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
    var nextWord = takeNext($word);
    switchWord($word, nextWord);
    }
  }
  
  function showLetter($letter, $word, $bool, $duration) {
    $letter.addClass('in').removeClass('out');
    
    if(!$letter.is(':last-child')) {
      setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration);
    } else {
      if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);}
      if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
    }
  }
  
  function takeNext($word) {
    return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
  }
  
  function takePrev($word) {
    return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
  }
  
  function switchWord($oldWord, $newWord) {
    $oldWord.removeClass('is-visible').addClass('is-hidden');
    $newWord.removeClass('is-hidden').addClass('is-visible');
  }
  
  document.addEventListener('pageChange', function(){
    animationDelay = 2500;
    barAnimationDelay = 3800;
    barWaiting = barAnimationDelay - 3000;
    lettersDelay = 50;
    typeLettersDelay = 150;
    selectionDuration = 500;
    typeAnimationDelay = selectionDuration + 800;
    revealDuration = 600;
    revealAnimationDelay = 1500;
    initHeadline();
  });
  
  window.onload = watch;
  function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}
});
  /*========================== SWIPE END ===================*/
</script>

Nothing in there looks like it's for the header menu.

I would say that you might be having a problem because of the different javascript libraries that are being used, generally bad practice.

ok, what do you recommend then?

And where else should I look for the hamburger menu code?

It may be being controlled just via CSS, that can work as a solution, but doesn't tend to be as robust a solution (in the cases I've seen).

I typically use this one when I want a mobile menu on desktop:
https://www.ghostplugins.com/products/forced-mobile-menu-in-squarespace-71

Apologies for the delay in response...work got the better of me.

I'll purchase this code, play around with it and report back. 

In the meantime, how would you suggest i correct the issue of the different javascript libraries I'm using? Should i just delete the whole thing entirely?

I have little web development experience, so it's a bit difficult for me to troubleshoot

2 hours ago, Squarepegroundhole01 said:

In the meantime, how would you suggest i correct the issue of the different javascript libraries I'm using? Should i just delete the whole thing entirely?

When you have code from different sources, they often come with their own javascript library, and ideally you would only include the newest version in your code injection, deleting the older libraries. In practice this will sometimes break the code, so you may have to keep an older library.

Try deleting both instances of:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

And just keep this one:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

Hey sorry, it was a bit of delay here. But wanted to follow up

Just reviewing my site again. Removing both of the google API instances removes the scroll bar at the top (which tells you how far down the page you are)

I just kept one and the scroll bar remained.

For context, I bought a few plugins from Square Studio some time ago, the scroll bar was one of them. I believe the older plugins are using those libraries. So I'm hesitant to randomly remove things as I'm sure it'll break the other plugs I'm using. Do you have any other suggestions here? Not sure what else I can do to address my original problem

On 3/19/2023 at 12:16 AM, Squarepegroundhole01 said:

Hey sorry, it was a bit of delay here. But wanted to follow up

Just reviewing my site again. Removing both of the google API instances removes the scroll bar at the top (which tells you how far down the page you are)

I just kept one and the scroll bar remained.

 

For context, I bought a few plugins from Square Studio some time ago, the scroll bar was one of them. I believe the older plugins are using those libraries. So I'm hesitant to randomly remove things as I'm sure it'll break the other plugs I'm using. Do you have any other suggestions here? Not sure what else I can do to address my original problem

The two codes that Ziggy are just the same code (they are different versions of the jQuery library), using duplicate code can make the other code unable to work.

(You can save a copy of all code somewhere, just for backup, before edit anything)

So to follow up on this topic. 

Searching through the Header and Footer shows 6 instances of

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

I deleted all of them and noticed no change other than the horizontal scroll bar disappearing again.

I re-added one of the instances, and the scroll bar came back. 

No change in behavior with the mobile menu (my original request.).

This plugin did not work for me: https://www.ghostplugins.com/products/forced-mobile-menu-in-squarespace-71

I think maybe some previous code could be preventing this from working correctly. Do you have any recommendations for the code I should look for relating to the Hamburger Menu?

So I'm currently upgrading my site to 7.1, so I no longer need the answer to this question.