Keep Menus Visable with Scroll

Hi Eric,

Here's how to do it.

1. Create your own custom child theme, or use this one: http://generatepress.com/api/themes/generatepress_child.zip

2. In the Mantle or Exhibit child themes (https://wordpress.org/themes/exhibit, https://wordpress.org/themes/mantle), you'll find a "js" folder - copy this folder into your new child theme.

3. In your child theme's functions.php file, add this:

add_action( 'wp_enqueue_scripts', 'generate_child_scripts' );
function generate_child_scripts() {

	wp_enqueue_script( 'stickynav', get_stylesheet_directory_uri() . '/js/scripts.js', array(), GENERATE_VERSION, true );

}

4. In your child theme's style.css, add this:

.admin-bar.stickynav.nav-below-header #site-navigation,
.admin-bar.stickynav.nav-above-header #site-navigation,
.admin-bar.nav-below-header #site-navigation,
.admin-bar.nav-above-header #site-navigation {
	top: 32px;
}
.stickynav.nav-below-header #site-navigation,
.stickynav.nav-above-header #site-navigation {
	border-top: 0 none;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 100%;
	z-index: 100;
	opacity: .8;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}
.stickynav.nav-below-header #site-navigation:hover,
.stickynav.nav-above-header #site-navigation:hover {
	opacity: 1;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}

.nav-above-header #site-navigation {
	border-top: 0 none;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 100%;
	z-index: 100;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}

That should do it :)

Awesome, thank you sir!

You're welcome! :)

I'm happy to piggy-back onto other threads, hope you don't mind Eric. Personally I like finding all the answers in a single thread when searching.

How do I get that to only happen on a certain screen size? I already have a fixed header and menu for large screens, I only want this to kick in when the screen gets small. Currently it gets a bit messy looking as the header stays fixed and is partially obscured.

It would need to be under these conditions, but I can't figure where to stick it?
@media screen and (max-height: 699px) and (max-width: 700px) {

The Valentine Gallery

OK, figured it.

Changed line 7 in scripts.js
from
if (scrollTop > stickyNavTop) {
to
if ((scrollTop > stickyNavTop) && ($(window).width() < 700)) {

Didn't need the height condition for this one.

Glad you figured it out :)

You could also wrap the above CSS in the media query, as it's the position:fixed that fixes the header to the top.

Your way works as well though!

Hi Tom,

This is awesome and worked first time. Thank you very much.

My only problem is the slight jump that happens as the menu transitions to sticky. Basically, the page jumps up, so any content that was immediately below the menu (i.e. the h1 heading) suddenly jumps to behind the menu.

Is there a simple way to make the transition smoother?

This is what I'm working on:
hosting.digidone.com/~rhiwabon/

Cheers,

Chris

Hi Tom,

I solved the issue by adding padding to the content area when the nav is sticky.

script.js:

jQuery(document).ready(function($) {
	var stickyNavTop = jQuery('#site-navigation').offset().top;

	var stickyNav = function(){
		var scrollTop = jQuery(window).scrollTop();
			 
		if (scrollTop > stickyNavTop) { 
			jQuery('body').addClass('stickynav');
			jQuery('#content').addClass('stickynav-padding');
		} else {
			jQuery('body').removeClass('stickynav');
			jQuery('#content').removeClass('stickynav-padding');
		}
	};

	stickyNav();

	jQuery(window).scroll(function() {
		stickyNav();
	});
});

style.css:

.stickynav-padding {
	padding-top:90px !important;
}

Perfect solution - thanks for sharing! :)

Very nice feature.

Pushing a little further: is there a way to add the logo of the website only when showing the nav in sticky mode? I would add it on the left of the main menu, maybe with a label that would only return a value (the logo) when in sticky mode. Is it the right way to do it? What would be the hook/test to do this?

This is a feature in our upcoming add-on :)

For now, this should help: http://generatepress.com/forums/topic/have-the-logo-show-in-the-sticky-menu/#post-97858

Menu Plus has been released, which includes options for sticky menus, as well as adding your logo to the navigation: http://www.generatepress.com/downloads/generate-menu-plus/

Hi Tom,

Great addition! I have removed the customization we previously did in this thread and activated MenuPlus instead. It's working great except for the logo: it appears very small (a couple of pixels) and I can't find the cause. I might need your help one more time, you can take a look here.

Thx,
Seb

Hi Seb,

Your navigation height is pretty tiny, which the logo isn't really meant for.

However, give this CSS a try:

.main-navigation .sticky-logo, 
.main-navigation .sticky-logo img {
    height: 15px;
}

.main-navigation .sticky-logo {
    padding-top: 5px;
}