I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixed position.
You can view the website with the menu at:
As you scroll down and the menu changes, it automatically brings you to the middle of the slide, which disrupts the user experience and flow of the site.
Below is the HTML code snippet:
<div class="nav-wrap">
<nav>
<div class="logo-container">
<?php happylearning_header_logo() ?>
</div>
<div id="menu-toggle-main">
<span>MENU</span>
</div>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'container' => 'nav',
'container_class' => 'nav-bar-conatainer',
'menu_class' => 'menu-class'
) );
?>
</nav>
</div>
The WordPress function replaces the nav container, ul, and li elements within the menu structure.
An example markup would be:
<nav class="nav-bar-conatainer">
<ul class="menu-class">
<li><a>example</a></li>
<li><a>example</a></li>
<li><a>example</a></li>
</ul>
</nav>
Here's the CSS related to the menu styling:
// CSS styles here
And finally, the jQuery implementation for handling the menu transition:
// jQuery code here