Anchor link in Dawn Theme won't close mobile menu

[Morb1rd]

Hi everyone,

I am wondering if there are coding alternatives for closing a mobile menu after an anchor link is selected in the menu? I’ve tried the following code in my theme editor js but alas no luck:

$(function () {
$(‘.mobile-menu__item [href*=“https://jd6602741.myshopify.com/#roadmap”]’).on(‘click’, function () {
$(‘.burger-container’).trigger(‘click’);
});
});

Image below shows that the top bar is moved up, users can’t scroll up to see the menu exit icon, users are stuck on this screen.

I’m wondering if there is a better functioning code, or a code for users to tap out of the menu to close the menu since the menu is stuck open when navigated to the anchor link section. Or, if there’s a code that sets the duration of time that the mobile menu is open for.

All answers welcome.

Thanks in advance!

[Morb1rd]

Oh Also - this is for the Dawn theme if that matters

[KetanKumar]

@Morb1rd

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Morb1rd]

Hi @KetanKumar

Thank you for reaching out.

Here is my link, it’s a test website: https://jd6602741.myshopify.com/

My password for website viewing: praust

Thank you!

[KetanKumar]

@Morb1rd

can you add this before this

[Morb1rd]

Hello @KetanKumar ,

I’m sorry, but where do I find this script? Thank you.

[Morb1rd]

Hello @KetanKumar ,

I’ve searched for “ajax” throughout my layout, templates, sections, snippets, assets, config, and locals - I could not find the script link mentioned above. Do I need to implement it somewhere?

Here’s an image of my theme editor js

Thank you

[KetanKumar]

@Morb1rd

add script theme.liquide before

[Morb1rd]

Hi @KetanKumar ,

Thanks for the response, unfortunately that has not changed. Here is were I placed the script.

[KetanKumar]

@Morb1rd

oh sorry if doesn’t work so it can be done some customization code

[simonlopez]

Hi! I was facing the same problem with Dawn version 9.0 and I figured out a solution for it. It’s a hacky temporary one, but it works.

In case anybody has the same problem, follow these steps.

1. Customize theme code and go to Sections > header.liquid
2. Find “localization-form.js” and under the endif tags (or could be anywhere before the header tag), insert this code

​

3. Change the uppercased link in the code after the href tag to the hash link you have set, for example - https://exampledomain.net/#contact-form

Note that you have to duplicate this code inside the script tag for every hash link you have. Sorry I cannot optimize since I don’t have the time for it.

$(function () {
  $('.menu-drawer__menu-item[href="https://CHANGETOYOURDOMAIN.TLD/#CHANGETOYOURSECONDHASH"]').on('click', function () {
    $('.header__icon--menu').click();
  });
});

Also note that this might not work if Dawn decides to change how they code their header.

In case there are devs here who would like to troubleshoot, the Jquery logic is

1. Select the hash link

2. On click, find and select the header icon/element that is tied to the opening and closing of the menu

3. Simulate a click to that element

[kawsar49]

Hi,

Having the similar issue. Could you please tell me where to put those code? In the header.liquid there is no localization-form.js.