Last updated December 6th, 2023 06:26
I really like to use the Sydney WordPress template, which has many great features. I use it for projects, where I need a sticky header menu. That is a menu which is available the entire length of the page contents (from top to bottom). This is especially used for one page sites, where the most of web content is concentrated on the main page, and links in the top menu are usually resolved by anchors. But in this template is a bug with mobile menu and today we will look, how to fix the mobile menu in the WordPress Sydney template.
How to fix the mobile menu in the WordPress Sydney template
A malfunctioning menu on a mobile device
The mobile menu behaves on your mobile by not closing, when you click on the link in the menu. So you must use a cross in the corner for closing it. But this cross also contains a link to the main site. When you click on the cross, you are going back to the introduction of website at the same time.
How can you fix the problem?
The problem has a fairly simple solution, in the form of Javascript, which removes both problems at once as one solution. So how you can fix it? Specifically, by teaching the mobile menu to close itself, when you click on a link.
You can make it by this JavaScript code:
(function($){
if( matchMedia('only screen and (max-width: 1024px)') ) {
$( document ).on('click', function(e){
if( !$( e.target ).closest('.menu-toggle').length ) {
$('.sydney-offcanvas-menu').removeClass('toggled');
}
});
}
})(jQuery);
How to insert JavaScript into the web?
There is a great plugin that JavaScript will insert into the template instead of you. So you can install the TC Custom JavaScript plugin in your WordPress for this purpose.
This plugin then integrates into the appearance menu as a standalone item and very simply allows you to use the javascript in the template without much knowledge of programming.
Specifically, the code above will fix a malfunctioning Sydney template menu on the one page sites in literally a few short minutes. So if you have the same problem with this template, you can try this very simple solution.
If this solution helps, write to me in the comments.
The website is created with care for the included information. I strive to provide high-quality and useful content that helps or inspires others. If you are satisfied with my work and would like to support me, you can do so through simple options.
Subscribe to the Newsletter
Stay informed! Join our newsletter subscription and be the first to receive the latest information directly to your email inbox. Follow updates, exclusive events, and inspiring content, all delivered straight to your email.
