Collapse mobile menu after clicking link

[Alec Burns]

Hello,

I’d like for my hamburger menu to collapse after a user clicks a navigation link. I’m currently using the Infinity Pro child theme.

Here’s the JavaScript file for the responsive menu:

(function(document, $, undefined) {

	// Add js body class when javascript is enabled
	$('body').addClass('js');

	// Add accessibility menu
	'use strict';

	var infinity = {},
		mainMenuButtonClass = 'menu-toggle',
		subMenuButtonClass = 'sub-menu-toggle';

	infinity.init = function() {
		var toggleButtons = {
			menu: $('<button />', {
					'class': mainMenuButtonClass,
					'aria-expanded': false,
					'aria-pressed': false,
					'role': 'button'
				})
				.append(infinity.params.mainMenu),
			submenu: $('<button />', {
					'class': subMenuButtonClass,
					'aria-expanded': false,
					'aria-pressed': false,
					'role': 'button'
				})
				.append($('<span />', {
					'class': 'screen-reader-text',
					text: infinity.params.subMenu
				}))
		};
		$('.nav-primary').before(toggleButtons.menu); // add the main nav buttons
		$('nav .sub-menu').before(toggleButtons.submenu); // add the submenu nav buttons
		$('.' + mainMenuButtonClass).each(_addClassID);
		$('.' + mainMenuButtonClass).addClass('ionicons-before ion-drag');
		$('.' + subMenuButtonClass).addClass('ionicons-before ion-chevron-down');
		$(window).on('resize.infinity', _doResize).triggerHandler('resize.infinity');
		$('.' + mainMenuButtonClass).on('click.infinity-mainbutton', _mainmenuToggle);
		$('.' + subMenuButtonClass).on('click.infinity-subbutton', _submenuToggle);
	};

	// add nav class and ID to related button
	function _addClassID() {
		var $this = $(this),
			nav = $this.next('nav'),
			id = 'class';
		$this.addClass($(nav).attr('class'));
		if ($(nav).attr('id')) {
			id = 'id';
		}
		$this.attr('id', 'mobile-' + $(nav).attr(id));
	}

	// Change Skiplinks and Superfish
	function _doResize() {
		var buttons = $('button[id^=mobile-]').attr('id');
		if (typeof buttons === 'undefined') {
			return;
		}
		_superfishToggle(buttons);
		_changeSkipLink(buttons);
		_maybeClose(buttons);
	}

	/**
	 * action to happen when the main menu button is clicked
	 */
	function _mainmenuToggle() {
		var $this = $(this);
		_toggleAria($this, 'aria-pressed');
		_toggleAria($this, 'aria-expanded');
		$this.toggleClass('activated');
		$('nav.nav-primary').slideToggle('fast'); //changed to .nav-primary since we're not toggling .nav-secondary
	}

	/**
	 * action for submenu toggles
	 */
	function _submenuToggle() {

		var $this = $(this),
			others = $this.closest('.menu-item').siblings();
		_toggleAria($this, 'aria-pressed');
		_toggleAria($this, 'aria-expanded');
		$this.toggleClass('activated');
		$this.next('.sub-menu').slideToggle('fast');

		others.find('.' + subMenuButtonClass).removeClass('activated').attr('aria-pressed', 'false');
		others.find('.sub-menu').slideUp('fast');

	}

	/**
	 * activate/deactivate superfish
	 */
	function _superfishToggle(buttons) {
		if (typeof $('.js-superfish').superfish !== 'function') {
			return;
		}
		if ('none' === _getDisplayValue(buttons)) {
			$('.js-superfish').superfish({
				'delay': 100,
				'animation': {
					'opacity': 'show',
					'height': 'show'
				},
				'dropShadows': false
			});
		} else {
			$('.js-superfish').superfish('destroy');
		}
	}

	/**
	 * modify skip links to match mobile buttons
	 */
	function _changeSkipLink(buttons) {
		var startLink = 'genesis-nav',
			endLink = 'mobile-genesis-nav';
		if ('none' === _getDisplayValue(buttons)) {
			startLink = 'mobile-genesis-nav';
			endLink = 'genesis-nav';
		}
		$('.genesis-skip-link a[href^="#' + startLink + '"]').each(function() {
			var link = $(this).attr('href');
			link = link.replace(startLink, endLink);
			$(this).attr('href', link);
		});
	}

	function _maybeClose(buttons) {
		if ('none' !== _getDisplayValue(buttons)) {
			return;
		}
		$('.menu-toggle, .sub-menu-toggle')
			.removeClass('activated')
			.attr('aria-expanded', false)
			.attr('aria-pressed', false);
		$('nav, .sub-menu')
			.attr('style', '');
	}

	/**
	 * generic function to get the display value of an element
	 * @param  {id} $id ID to check
	 * @return {string}     CSS value of display property
	 */
	function _getDisplayValue($id) {
		var element = document.getElementById($id),
			style = window.getComputedStyle(element);
		return style.getPropertyValue('display');
	}

	/**
	 * Toggle aria attributes
	 * @param  {button} $this     passed through
	 * @param  {aria-xx} attribute aria attribute to toggle
	 * @return {bool}           from _ariaReturn
	 */
	function _toggleAria($this, attribute) {
		$this.attr(attribute, function(index, value) {
			return 'false' === value;
		});
	}

	$(document).ready(function() {

		infinity.params = typeof InfinityL10n === 'undefined' ? '' : InfinityL10n;

		if (typeof infinity.params !== 'undefined') {
			infinity.init();
		}

	});

})(document, jQuery);

Thank you!

http://alecbwd.com/testing/jay/

[Alec Burns]

Did I post this in the wrong place?

[sah]

Alec-

I have the same question - getting infinity pro's mobile menu to close back up after clicking on a link that goes to a location on the same page.

Did you ever find a solution?

Susan

[carasmo]

This should be a question for StudioPress support as this is an oversight in their js.

Anyway, this is untested but should work.

First you have to change the js to use the unminified version then re-minify or pack it afterwards.

Using FTP and a code editor, open up responsive-menus.js (not the min version), at the very bottom find:

	$(document).ready(function () {

		if ( _getAllMenusArray() !== null ) {

			genesisMenu.init();

		}

	});

Change that to add the function to close the menu:

$(document).ready(function() {

    if (_getAllMenusArray() !== null) {

        genesisMenu.init();

        //* Close Menu Panel when a link that is an anchor is clicked but not just a #
        $('.genesis-responsive-menu ul li a[href*=#]:not([href=#])').on('click', function() {

            var $toggle = $('.menu-toggle');

            $toggle.next('nav').slideUp();
            $toggle.attr('aria-expanded', 'false');
            $toggle.attr('aria-pressed', 'false');
            $toggle.removeClass('activated');

        });

    }

});

After this chunk make sure you have kept the })( document, jQuery );

Now stick that on your server in the correct location in your theme with FTP and open up the php in a code editor (probably functions.php) where they are enqueueing the scripts and find the words responsive-menus.min.js and change that to the responsive-menus.js. Clear all local and server cache.

Test. If it works, then re-minify the script (online you can use http://refresh-sf.com/) and replace the code inside responsive-menus.min.js and then change the php back.

In order to this properly, use the proper tools.

Backup first all the files so you can swap back if you create an error.

---

Genesis Theme Customization and Help

[vgmm008]

I have a similar issue with magazine pro. I added a search icon in the primary nav menu, which slides down a full screen overlay with a search form. (the idea is described here https://sridharkatakam.com/slide-search-box-full-screen-overlay-genesis/)

my responsive menu on mobile is running correctly except when I click on the search icon, the responsive menu does not collapse and the resulting full screen overlay search form page is not proper...

I tried modifying the responsive-menus-js files as suggested above but it is not successful.

Thank you very much

[carasmo]

Your issue is not the same so the code will not work. You would need to write jQuery to close the menu when the search icon is clicked. Open up another thread and see if a volunteer here will help you. You will need to link to your site.

---

Genesis Theme Customization and Help

[vgmm008]

thank you very much for your reply. for now the client website is not online...

[Alec Burns]

Thanks for the help! Unfortunately, as this post didn't get a response for 3 1/2 months, I ended up just outsourcing the work. I'm new to the forum—should I leave this up for others?

Thank you,
Alec

[Author]

Posts