Responsive menu to collapse on anchor link click

Heya @paupiviri – the overlay (mobile) menu is part of the block editor within WordPress core, and not something within the theme itself. It’s not really designed to work with anchor links, so your best bet is probably just to deactivate it:

Since your menu is short, this should still look and work well on mobile, as it does on my test site.

Let me know how it goes!

Hi Kathryn!
Thanks for your response.
For now I have made the overlay menu’s background transparent and it has solved my problem. It would be good to see the viability of changing the configuration of the overlay menu for including this feature.

@paupiviri Glad you found a workaround!

It would be good to see the viability of changing the configuration of the overlay menu for including this feature.

Just so I’m clear as to what you’re suggesting, are you thinking of an option on the Navigation block to make the mobile overlay background transparent, or something else? Thanks!

Not for making the background transparent, but for the menu to work with anchor links, reloading the page when they are clicked on.
How easy do you think it would be? I don’t know how many people would use it, the viability depends heavily on this.

Hi @paupiviri – I did a little more digging, and found this issue (“Close overlay menu when clicking an anchor link”) which seems to reflect the problem on your site:

https://github.com/WordPress/gutenberg/issues/39585

The issue looks to have been fixed back in March, however, so I’m not sure why it’s still occurring on your site.

I also just tested this on my own site with Twenty Twenty-Two, and so far I’ve not been able to replicate. When clicking my anchor link in the menu, the mobile menu automatically closes.

Here are a couple of troubleshooting steps:

Could you please check whether the issue is present with all your plugins temporarily deactivated? You can use the Health Check plugin’s troubleshooting mode for this, which will not change your live site – https://www.ads-software.com/plugins/health-check/

Twenty Twenty-Two is now at version 1.3, while your site is running 1.2, so I’d suggest you update the theme to rule out any issues on that end.

I also noticed you made a child theme of TT2. Was that only to add custom CSS, or was there another reason?

Let me know how it goes!

Hi Kathryn!
Thanks for the research! I think the issue then is that I am using a child theme. I have had this as a good practice for years, but now I am thinking that it is not such a good idea, as I miss the updates. It’s just good for adding/removing not only CSS, but also html and PHP. I don’t remember if I have used it for this on this website, I just use child themes in all the websites I develop.
I’ll have a thought about this, let me know if you have any suggestion. Thanks again!

@paupiviri Gotcha! You might want to try temporarily activating the TT2 parent theme — even if only via the Health Check plugin, which doesn’t affect the site your visitor see. With the parent theme active, see if the issue with the mobile menu persists. If the issue goes away, you’ll know that the problem lies somewhere in your child theme, and then perhaps you can start comparing your child-theme files with the parent to figure out where the differences are. (I think there are apps that you let you do this in a more automated way.) Or, you could decide to just keep the parent theme active and think about whether you really need a child theme for this site or not. ?? With Site Editing and block themes (like Twenty Twenty-Two), many things that once required a child theme can be done right in the editor, with no code changes required!

Thanks for your message!
The options for adding new styles in WordPress are a bit limited in my opinion.

If you use a child theme, you lose the updates of the parent theme, but there are other disadvantages associated with adding CSS in the editor as you suggest.

The styles are applied but become non-editable when the theme is changed (see https://stackoverflow.com/questions/46464779/wordpress-additional-css-is-lost-on-theme-change) and they are added inline, mixing structure and style and forcing the browser to load the code for each page (see https://wordpress.stackexchange.com/questions/340129/is-it-better-to-put-css-in-additional-css-or-in-child-theme-styles-css).

In order to make code more accessible for future users and optimise performance, I think that using a child theme is the best option, although this may depend on the situation where this is being applied.