[Resolved] Keep Menus Visable with Scroll

Home Forums Support Keep Menus Visable with Scroll

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #54360
    Eric

    Hi Tom,

    I found this subject when searching, but I am not sure how you feel about people piggy-backing onto other’s threads, so I figured I would start a fresh one just in-case. I was curious if you happen to have the code handy to keep the menu visable for the parent GeneratePress theme…at least the one you were talking about in this post: http://generatepress.com/forums/topic/keep-menu-visible/#post-19321

    My menus are full width so I think this would be what I would need, if you have it have it handy. Thank you!

    #54453
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #54458
    Eric

    Awesome, thank you sir!

    #54951
    Tom
    Lead Developer
    Lead Developer
    #65793
    theonetruevlad

    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

    #65796
    theonetruevlad

    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.

    #65982
    Tom
    Lead Developer
    Lead Developer

    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!

    #117953
    Chris

    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

    #117964
    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;
    }
    #117998
    Tom
    Lead Developer
    Lead Developer

    Perfect solution – thanks for sharing! 🙂

    #119169
    Sebastien

    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?

    #119228
    Tom
    Lead Developer
    Lead Developer
    #127150
    Tom
    Lead Developer
    Lead Developer

    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/

    #127289
    Sebastien

    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

    #127373
    Tom
    Lead Developer
    Lead Developer

    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;
    }
Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.