Jump to content

Hamburger menu does not appear on desktop fullscreen

Recommended Posts

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

image.thumb.png.84afdc7aa0ed177599005e969c607744.png

Edited by Squarepegroundhole01
update
Link to comment
  • Squarepegroundhole01 changed the title to Hamburger menu does not appear on desktop fullscreen
  • Replies 15
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

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

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

That is very odd behaviour. What code solution did you use for the desktop hamburger 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

Under Settings -> Advanced -> Code Injection

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

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>

 

Link to comment

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.

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

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

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

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

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 month later...

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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?

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.