Need a bit of menu customization help please

I would like to modify the behavior of my main menu & topbar so they stay with the page body as you scroll down (usual behavior), but then have them slide into view as you scroll back up.

During a live chat session, Patrick provided a link to a great tutorial on how to get that done, but I really don't know how to myself and would appreciate some expert help:
https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

  • Nahid
    • Tech Support

    Hey Elena !
    Hope you are having a great day!

    I was able to achieve the required behavior by adding the following lines of code in a mu-plugin file named "sticky-header.php" inside your WordPress Installation Directory/wp-content/mu-plugins folder:

    <?php
    add_action( 'wp_head', 'sticky_header' );
    function sticky_header() {
    	echo '
    		<style>
    			#pusher-wrap {
    				perspective: none;
    			}
    			.classic-menu.mini {
    			    position: fixed;
    			    top: -90px;
    			    margin-top: 0;
    			    transition: top 0.2s ease-in-out;
    			}
    
    			.classic-menu.mini.showit {
    				top: 0;
    			}
    		</style>
    		<script>
    			( function( $ ) {
    				$( document ).ready( function() {
    					var lastScrollTop = 0;
    					$( window ).scroll( function( event ) {
    							var st = $(this).scrollTop();
    							if ( st < lastScrollTop ) {
    								$( ".classic-menu.mini" ).addClass( "showit" );
    							} else {
    								$( ".classic-menu.mini" ).removeClass( "showit" );
    							}
    							lastScrollTop = st;
    					});
    				});
    			})( jQuery );
    		</script>
    	';
    }

    Could you please check if it is working for you?

    Hope this helps. We'll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.