How to fix the mobile menu in the WordPress Sydney template

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.

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.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

Leave a Comment

Comment moderation is enabled. Your comment may take some time to appear.