TQM8 Posted April 9, 2020 Share Posted April 9, 2020 I am code-injecting JavaScript/jQuery to build a smooth-scrolling, hash navigation for a fixed-top menu bar in Squarespace 7.1 (so no template). The scrolling works great on desktop; on mobile it works too, with one exception. The navigation tray stays visible on the screen after clicking a link. So the page scrolls behind the open menu and it must be closed to return to the site. This is confusing. The plan: close the nave menu with the smooth-scrolling script. Here are the steps used to make it disappear (including code for specificity). Remove the "header menu open" class from the page body. This re-hides the menu. $('body').removeClass("header--menu-open"); Remove the "x"-shaped styling from the hamburger menu, returning it to a "=" shape. $('.burger').removeClass("burger--active"); Remove the "hidden" HTML5 attribute on the <span> inside of the hamburger button's "open me" state (the "="). $('.js-header-burger-open-title.visually-hidden').removeAttr('hidden'); Add the "hidden" attribute to the hamburger button's "close me" state (the "x"). $('.js-header-burger-close-title.visually-hidden').prop('hidden', true); The problem: Everything appears as it should visually on the page, as well as the changes in the web-inspector when opening/closing the nav tray normally. But at this point the hamburger menu (in "=" state) requires an extra click to open the menu as it normally would. One click to trigger something(?) and a second to open the menu. It seems Squarespace does not recognize the added "hidden" attribute from step 4. Does anyone know why that is, or where to start looking? I have had trouble with odd AJAX calls during page reloads, perhaps that is a hint. As this is beyond my knowledge – especially of 7.1 – any advice, direction, or thoughts are appreciated. iMarioG 1 Link to comment
tuanphan Posted April 9, 2020 Share Posted April 9, 2020 You can try inspecting element their demo. https://www.squareaddons.com/shop-2/anchor-linking 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
iMarioG Posted May 7, 2020 Share Posted May 7, 2020 @TQM8 any luck with this? I’m having the same issue. Link to comment
IanW Posted September 2, 2020 Share Posted September 2, 2020 I like the idea, but it seems easier to help the user click the close button. That way the logical abstraction of the burger menu isn't broken. This is my code: function closeMenu() { var off = $('.burger-inner'); if (off != null && off.length > 0) { eventFire(off[0], 'click'); } } function eventFire(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } } 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