How reduce the width of a sticky menu-bar?

[Dan-cer]

Hi,
I followed the tutorial http://my.studiopress.com/tutorials/sticky-menu/ and it is working most.
As the site has a boxed-layout of max-width: 1200px, the sticky menu should also have this width.
Actually the menu has full-width of screen.

I took this css-code from the tutorial:

 .nav-secondary {
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 16px;
	display: none;
	position: fixed;
	width: 100%;
	z-index: 999;
}

How can I change the width now? I invested the elements live, but can't get the right code for it.

https://official.jungvital.com

[Dan-cer]

I got an answer at http://wordpress.stackexchange.com:

"You have another div controlling the full width background. You need to alter the css of that one if you want the width to look. This css takes the background off the full width div you have and put the background on the wrap div that you have maxing at 1200px;"

.lifestyle-pro-blue .nav-secondary {background:none;} .wrap{background-color:rgba(0,0,0,0.5);}

This works!

[Dan-cer]

That was not yet the best solution. I got another script using the nav-primary-menu bar.

jQuery(function( $ ){
	$(window).scroll(function() {
		var yPos = $(window).scrollTop();
		if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top
			$(".nav-primary").addClass('sticky-nav');
		} else {
			$(".nav-primary").removeClass('sticky-nav');
		}
	});
});

/* CSS (kein Leerzeichen zwischen .nav-primary und .sticky!):

.nav-primary.sticky {
	background: none;
	position: fixed;
	width: 100%;
	left: 0;
	z-index: 999;
}

.nav-primary.sticky .wrap {
	background-color: rgba(0, 0, 0, 0.5);
}

*/

/*Function
//* Enqueue sticky menu script
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
	wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/sticky-menu.js', array( 'jquery' ), '', true );
}
//* Reposition the secondary navigation menu

remove_action( 'genesis_after_header', 'genesis_do_subnav' );

[Author]

Posts