Jump to content

Close Hamburger menu after clicking link to ID on page

Recommended Posts

I'm on 7.1 and I have a CTA nav link that takes you to a location on the page via id. If the CTA link is clicked in the hamburger menu it scrolls down to the id but doesn't close the menu. Not only is the menu overlapping the page, it also hides the close button for the menu.

Anyone have suggestions on closing the hamburger menu after clicking the id link? I can't seem to use javascript in the link, otherwise I could even just reload the page with the correct id attached.

Link to comment
3 minutes ago, tuanphan said:

Did you solve? 

No luck, I used CSS to disable the hamburger menu since I only have 2 items in it. One is a link away from squarespace and the other is the CTA which should take you down the page and is the cause of the problem. We're better off not getting people stuck on the site so I opted to remove it manually.

 

4 minutes ago, tuanphan said:

If nav has only 2 items, you can disable mobile menu, replace with desktop menu

Do you know if there's a clean way to disable the mobile menu through the settings?

Link to comment
  • 3 months later...
17 hours ago, theorygraphics said:

I'm having the same issue on a site i'm building. I have links in my primary nav to anchor tags of each block section and when I click them in the mobile nav the nav stays on the screen and the X scrolls with the page so there is not a way to close the menu. 

I solved this for a client yesterday  😂 It needs custom code (JavaScript)

I will post the solution on forum soon 

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
  • 9 months later...
  • 1 year later...
On 2/28/2020 at 7:40 AM, tuanphan said:

I solved this for a client yesterday  😂 It needs custom code (JavaScript)

I will post the solution on forum soon 

Hello, I wanted to see if this solution was posted somewhere as I am running into the same issue.

Thanks!

Link to comment

Try adding to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-menu-nav-item a').click(function(){
    $('body').removeClass('header--menu-open');
    $('button.header-burger-btn.burger').click();
  });
})
</script>

 

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
On 2/23/2022 at 8:49 AM, tuanphan said:

Try adding to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-menu-nav-item a').click(function(){
    $('body').removeClass('header--menu-open');
    $('button.header-burger-btn.burger').click();
  });
})
</script>

 

Is this for Squarespace 7.0? Can't get this to work on the 7.1 version.

Link to comment
  • 1 year later...
1 hour ago, hello_studiofrey said:

I am having the same problem when switching languages on mobile.

The links to the other language pages don't go anywhere. Shouldn't they go to different pages? If so, adding the correct page links will solve your problem. 

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.