Modifying Secondary Menu – Altitude Pro

[Sheldon]

I need advice on finessing the Secondary Menu in Altitude Pro theme. As a relative newbie, I'm pretty stoked I've got as far as I have, but now I'm stuck.

webpage in question http://pineridgegolfcourse.waldheimvrp.ca/

I want to change location of secondary menu to after the main menu, and have it mimic the behaviour of the main menu (sticky, transparent initially, then dark and smaller when scroll is not at top of page).

This is as far as I have got.

I relocated Secondary menu by commenting out the appropriate section in functions.php.

//* Reposition the secondary navigation menu
//* remove_action( 'genesis_after_header', 'genesis_do_subnav' );
//* add_action( 'genesis_header', 'genesis_do_subnav', 5 );

I changed .nav-secondary to fixed position to make it sticky via css and gave it top positions of 77px for over 1200px and 154px for over 1023px (hopefully easier way to do this),

I added a .dark class to the nav-secondary by duplicating the code for .site-header in global.js, so I now get a nav-secondary.dark class.

if( $( document ).scrollTop() > 0 ){
		$( '.site-header' ).addClass( 'dark' );
		$( '.nav-secondary' ).addClass ( 'dark' );			
	}

	// Add opacity class to site header
	$( document ).on('scroll', function(){

		if ( $( document ).scrollTop() > 0 ){
			$( '.site-header' ).addClass( 'dark' );
			$( '.nav-secondary' ).addClass ( 'dark' );			

		} else {
			$( '.site-header' ).removeClass( 'dark' );
			$( '.nav-secondary' ).addClass ( 'dark' );			
		}

	});

And added top position of 56px to .nav-secondary.dark in css.

How is the height of the primary menu determined, so that I can match the secondary menu to it?

On initial load of webpage, everything is good. When I scroll down, it's all good as well. Problem is when I scroll back up, when I scroll back up, .nav-secondary.dark stays in effect (should change back to .nav-secondary).

I suspect part of my issue is that .site-header is a container for the primary navigation, and .nav-secondary IS the navigation, and I'm trying to treat them the same.

Any suggestions?

Sheldon Hildebrand

http://pineridgegolfcourse.waldheimvrp.ca/

[Christoph]

Hi,

great job!
1)
The height is usually determined by the padding.

2)
I'd try changing

} else {
			$( '.site-header' ).removeClass( 'dark' );
			$( '.nav-secondary' ).addClass ( 'dark' );	

to

} else {
			$( '.site-header' ).removeClass( 'dark' );
			$( '.nav-secondary' ).removeClass ( 'dark' );	

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Sheldon]

Thanks! Yeah, that was embarassingly obvious!

As for the repositioning, I discovered using css to position the secondary header was impractical. Was able to put the secondary menu into the proper position simply by keeping the original repositioning code and changing the priority to match that of the primary menu (and now I know about priorities!! Cool!)

I've added a unique background color to the secondary menu, now I have to figure out how to make the background color extend full width, outside of the site-header wrap container on large browsers.

I also moved the white bottom border from site-header to nav-primary so that each menu has a bottom-border. Now I have to figure out how to remove it when .dark (guessing will have to add a .dark class to nav-primary and hope it doesn't impact other parts of site).

[Author]

Posts