I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides down, only to return to its original position when the menu slides back up. I suspect there may be an error in my HTML structure or CSS code causing this behavior. As someone who is still learning CSS, my code might be a bit messy. Any guidance on how to resolve this issue would be greatly appreciated. Feel free to check out our code on CodePen.
<header>
<div id="logo">
Industries
</div>
<div>
<span id="Menu">Menu</span>
</div>
<ul>
<li>Home</li>
<li>Elements</li>
<li>Generics</li>
</ul>
</header>
<section id="heading">
<div class="inner">
<h1>Industries</h1>
<p>A responsive business-oriented template with a video background designed by TEMPLATED and released under the Creative Commons License.</p>
</div>
</section>
<section id="one">
<div class="inner">
<h3>SEM TURPIS AMET SEMPER</h3>
<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor.
</p>
</div>
<div id="six_blocks">
<div id="block">
<span></span>
<h5>FEUGIAT CONSEQUAT</h5>
<p>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus.</p>
</div>
<div id="block">
<span></span>
<h5>ANTE SEM INTEGER</h5>
<p>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus.</p>
</div>
<div id="block">
<span></span>
<h5>IPSUM CONSEQUAT</h5>
<p>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus.</p>
</div>
<div id="block">
<span></span>
<h5>INTERDUM GRAVIDA</h5>
<p>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus.</p>
</div>
<div id="block">
<span></span>
<h5>FAUCIBUS CONSEQUAT</h5>
<p>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus.</p>
</div>
<div id="block">
<span></span>
<h5>ACCUMSAN VIVERRA</h5>
<p>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus.</p>
</div>
</div>
</section>
<section id="two">
<div id="inner">
<h3>CURABITUR ULLAMCORPER ULTRICIES</h3>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing. Lorem
ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing sed feugiat eu faucibus. Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida.</p>
</div>
</section>Appreciate your help!