Altitude Pro Mobile Nav Changes in global.js

[thoughtwell]

I'm modifying Altitude Pro to have the responsive nav button in the header outside of the primary nav wrap.

Here is the excerpt from global.js that I am referring to:

$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"></div>');

	$( '.responsive-menu-icon' ).click(function(){
		$(this).next( '.nav-primary .genesis-nav-menu,  .nav-secondary .genesis-nav-menu' ).slideToggle();
	});

To do this, I've edited before method that inserts the div w/ the icon/button that activates the menu by separating it from the addClass method that was attached to the unordered list of items for the navigation. This hopefully allows me to better position that button within the header by adding relative positioning to the main site-header wrap while absolutely positioning the icon/button.

However, this throws off the click method's function just below this. I edited that function by removing:

$(this).next('.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu').slideToggle();

and replacing with:

$('.responsive-menu').slideToggle();

because essentially, we've added the class 'responsive-menu' to the aforementioned unordered list designated by all of those classes we just removed a little bit earlier in global.js.

The result is similar to what I had before, but now the icon is placed inside the header and outside the .nav-primary wrap, which is how I wanted it so that I can be a bit more flexible with the positioning.

Is there a reason why this was written with:

'$(this).next('.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu').slideToggle();

in the first place? It just seems it would be more simple to add the slideToggle method to the ul w/ the class '.responsive-menu' since we're just selecting to toggle the same element... Is there some sort of efficiency gain from having it the way it was originally?

I'm pretty green when it comes to js, so can someone shed some light on why this function to toggle states on this unordered list is as it is in the virgin script from studio press?

Is there a better way to make this mobile nav more intuitive and better position the icon next to the header image so that it doesn't push the nav down the header and occupy the top third of the screen on a mobile nav (in the closed state)? Perhaps it's as simple as editing the css? It just seems having that icon inside the wrap is really making it difficult to reposition the icon using transforms or positioning because the float inheritance starts doing funny things.

[Susan]

As you posted this a while back, I hope you got your issue resolved.

If it is resolved, please go ahead and mark it resolved, so that it can be closed.

If you are still looking for a solution, you might have more luck posts on the Genesis Facebook group - it's a pretty active group with 5,000 members: https://www.facebook.com/groups/genesiswp/

[Author]

Posts