Sticky Menu for Theme: GeneratePress

Pleasant in all respects Theme “GeneratePress”. But there was a need to slightly improve the interface. With vertical page scrolling, the horizontal Menu should sticky at the top of the window.

Sorry for Google translation ((

It was decided to do without plugins.

To child-Theme copy the file: header.php from the original Theme.
Make changes:

... str.11

if( wp_is_mobile() ){
	// If this is a mobile device
	$Mobile = 1;
} else {
	$Mobile = 0;
}

if ( is_user_logged_in() ) {
 // Top position Menu correction, if the User is logged in. (admin or users.)
 $MenuBar_Correction = 1;
} else {
 $MenuBar_Correction = 0;
}

... str.28
<head>
 ...
</head>

<script>
 // Making a sticky menu.
 jQuery(document).ready(function(){
 var Mobile = <?php echo $Mobile;?>;
 var MenuBar_Correction = <?php echo $MenuBar_Correction;?>;
 var stickyHeaderTop = jQuery('#site-navigation').offset().top;
 var window_scrollTop;
 var AdminBar_H = 0;
 var AdminBar_Position;
 var MaxWidth_Content = jQuery('#site-navigation').css('max-width'); 
 MaxWidth_Content = parseInt(MaxWidth_Content, 10); 
 
 if (Mobile == 1) {
 // Do not use Sticky for mobile devices, because opened menu can go beyond the bottom of the screen.
 return;
 } 
 
 // React to the Scroll
 jQuery(window).scroll(function(){
 RepositionMenu ();
 });
 
 // Respond to changes in screen size
 jQuery(window).resize(function(){
 RepositionMenu ();
 });
 
 function RepositionMenu () {
 // Making Sticky-Menu, if there is a condition.
 window_scrollTop = jQuery(window).scrollTop();
 
 if (MenuBar_Correction == 1) {
 AdminBar_Position = jQuery('#wpadminbar').css('position');
 
 if (AdminBar_Position == 'fixed') {
 // Correction Sticky-Menu top position, if User loged in and AdminBar is fixed (depends on the width).
 AdminBar_H = jQuery('#wpadminbar').height();
 }
 }
 var Top_Sticky = AdminBar_H + 'px'; 
 
 if( window_scrollTop > stickyHeaderTop ) {
 // Sticky-Menu ON
 var Width_Menu = jQuery('#site-navigation').width();
 
 if (Width_Menu < MaxWidth_Content) {
 jQuery('#site-navigation').css({
 position: 'fixed', 
 width: '100%', 
 top: Top_Sticky,
 left: '0px'
 }); 
 } else {
 jQuery('#site-navigation').css({
 position: 'fixed', 
 width: '100%', 
 top: Top_Sticky,
 left: 'calc((100% - ' + MaxWidth_Content + 'px)/2)'
 }); 
 }
 } else {
 // Sticky-Menu OFF
 jQuery('#site-navigation').css({
 position: 'relative',
 left: '0px',
 top: '0px'
 });
 } 
 }
 }); 
</script>

In fact, that’s all.
As a result, we get the following: As soon as we start scrolling the page down, and the horizontal Menu reaches the top of the window, then it – this Menu sticks and remains in place with further scrolling.
Scrolling up the page, as soon as we reach the position of the initial location of the horizontal Menu, it again comes off and moves along with the content of the page.

The proposed option copes with the situation when the width of the content is limited and the window can be wider and the restrictions already set.

For mobile devices (not to be confused with just a narrow screen, manually shifted), the behavior is different. The script simply turns off and the menu behaves as usual.
This is done in order to avoid situations where the number of items and sub-items in the Menu when it is opened exceeds the screen size (usually in a horizontal layout) and it becomes inconvenient to use such an interface.

WordPress Gear

Sticky Menu for Theme: GeneratePress

1 thought on “Sticky Menu for Theme: GeneratePress”

Leave a Reply Cancel reply