Jump to content

Hide mobile nav/hamburger menu with JavaScript in 7.1

Recommended Posts

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

  1. Remove the "header menu open" class from the page body. This re-hides the menu.
  2. Remove the "x"-shaped styling from the hamburger menu, returning it to a "=" shape. 
  3. Remove the "hidden" HTML5 attribute on the <span> inside of the hamburger button's "open me" state (the "="). 
  4. 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. 

Link to comment
  • Replies 3
  • Views 2.2k
  • Created
  • Last Reply
  • 4 weeks later...
  • 3 months later...

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


Link to comment


This topic is now archived and is closed to further replies.

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