Custom Sticky bar instead of GeneratePress jQuery solution

sticky-nav.css

/** 
* Enqueue this file like the above or use WPCodeBox snippets plugin to do it, or add it to customizer custom CSS box
*/

/* custom sticky header */
.main-navigation {
	transition: all ease .5s;
	position: fixed;
	top: 0;
	left:0;
	right: 0;
}

.main-navigation.hide,
.main-navigation.hide.sticky {
	top: -60px;
}

.main-navigation.sticky {
	background-color: var(--primary-light) !important;
	top: 0;
}


.main-navigation.sticky a,
.main-navigation.sticky .icon-menu-bars svg path {
	color: var(--primary-dark) !important;
}

.main-navigation.sticky a:hover,
.main-navigation.sticky .icon-menu-bars svg path {
	color: var(--accent) !important;
}

sticky-nav.js

/** 
* enqueue this file with a standard wp method along the way of this 
* @link https://gist.github.com/thisbit/70887b3fc4e5e1283b6314f1fb23d504#file-assets_enqueuer-php
* or use WpCodeBox snippets plugin to do it
**/

window.addEventListener( "DOMContentLoaded", () => { // Reveal header on scroll up.
	const doc = document.documentElement;
	const w = window;
	let prevScroll = w.scrollY || doc.scrollTop;
	let curScroll;
	let direction = 0;
	let prevDirection = 0;
	const headerHeight = 60; // change to fir your header height
	const header = document.querySelectorAll( ".main-navigation" );

	const checkScroll = function() { // Scroll direction: 0 - initial, 1 - up, 2 - down
		curScroll = w.scrollY || doc.scrollTop;
		if ( curScroll > prevScroll ) {
			direction = 2;
		} else if ( curScroll < prevScroll ) {
			direction = 1;
		}
		if ( direction !== prevDirection ) { // if we are scrolling, run with it
			toggleHeader( direction, curScroll );
		}
		if ( curScroll < headerHeight ) { // if we are at the very top of the browser (less scroll then topbar height) go to begining
			if ( header ) { header.forEach( element => element.classList.remove( "sticky" ) ); }
		}
		prevScroll = curScroll;
	};
	const toggleHeader = function( direction, curScroll ) {
		if ( direction === 2 && curScroll > headerHeight ) { // if we are going down and past beyond header height
			if ( header ) { header.forEach( element => element.classList.add( "hide" ) ); } // hide the header
			prevDirection = direction;
		} else if ( direction === 1 && curScroll > headerHeight ) { // if we are going up and we are not yet at the top reveal
			if ( header ) { header.forEach( element => element.classList.add( "sticky" ) ); }
			if ( header ) { header.forEach( element => element.classList.remove( "hide" ) ); }
			prevDirection = direction;
		}
	};
	window.addEventListener( 'scroll', checkScroll );
}, false );