Canvas Support

Animate or have active states for nav toggle icon

3 replies · opened Jun 7, 2016

HheadrushJun 7, 2016

When the toggle for the main nav is active state and the nav menu is shown is it easy to show an alternate icon say either fade in a cross/close icon or rotate the icon to show that it has been clicked and is active.

Thank you
Matt

SSemicolon WebSTAFFJun 13, 2016

Hello,

This is Definitely Possible. Please follow the steps below:

  1. Simply add the following CSS Code:
body:not(.primary-menu-open) #primary-menu-trigger i:nth-child(1),
body.primary-menu-open #primary-menu-trigger i:nth-child(2) { display: block; }

.primary-menu-open #primary-menu-trigger i:nth-child(1),
body:not(.primary-menu-open) #primary-menu-trigger i:nth-child(2) { display: none; }
  1. Then add the following JS Code at the bottom of the Page after the js/functions.js JS File Linking:

	jQuery('#primary-menu-trigger').click(function() {
		jQuery('body').toggleClass( 'primary-menu-open' );
		return false;
	});

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

HheadrushJun 13, 2016

Thank you, how do I add the close icon to display on toggle at the moment it is blank on toggle

SSemicolon WebSTAFFJun 14, 2016

Hello,

Oops! Really apologize that we missed this part! Please find the following code on the Page:

and replace it with:

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard