Squarepegroundhole01 Posted February 1 Share Posted February 1 (edited) 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., Edited February 1 by Squarepegroundhole01 update Link to comment
Ziggy Posted February 1 Share Posted February 1 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Squarepegroundhole01 Posted February 1 Author Share Posted February 1 https://www.michaelaguocha.com/ Link to comment
Ziggy Posted February 1 Share Posted February 1 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Squarepegroundhole01 Posted February 2 Author Share Posted February 2 dumb question. But where would that be that again? I forgot where that would be placed. Link to comment
Ziggy Posted February 2 Share Posted February 2 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Squarepegroundhole01 Posted February 3 Author Share Posted February 3 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
Ziggy Posted February 3 Share Posted February 3 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Squarepegroundhole01 Posted February 3 Author Share Posted February 3 ok, what do you recommend then? And where else should I look for the hamburger menu code? Link to comment
Ziggy Posted February 4 Share Posted February 4 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Squarepegroundhole01 Posted February 9 Author Share Posted February 9 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
Ziggy Posted February 9 Share Posted February 9 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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Squarepegroundhole01 Posted March 18 Author Share Posted March 18 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
tuanphan Posted March 20 Share Posted March 20 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Squarepegroundhole01 Posted March 30 Author Share Posted March 30 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
Squarepegroundhole01 Posted April 4 Author Share Posted April 4 So I'm currently upgrading my site to 7.1, so I no longer need the answer to this question. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment