As a newcomer to front-end development, I am currently working on incorporating a Slide-in Sidebar snippet into my layout.
I suspect that there may be an issue with the JavaScript code, but since I'm not familiar with JS, it's difficult for me to pinpoint the exact problem. I understand that this is a lot to ask, but any guidance would be greatly appreciated.
HTML:
<div class="st-container">
<nav class="st-menu st-effect-1" id="menu-1"> <!-- Sidebar Menu -->
<ul>
<li><a class="icon icon-data" href="#">Data Management</a></li>
<li><a class="icon icon-location" href="#">Location</a></li>
<li><a class="icon icon-study" href="#">Study</a></li>
<li><a class="icon icon-photo" href="#">Collections</a></li>
<li><a class="icon icon-wallet" href="#">Credits</a></li>
</ul>
</nav> <!-- End of Sidebar Menu -->
<div class="navigation"> <!-- Navigation -->
<div id="st-trigger-effects" class="section">
<button data-effect="st-effect-1"><i class="fa fa-bars"></button></i></li> <!-- Hamburger Button -->
</div>
<div class="nav-content section">
<div class="nav-logo">Blogger</div>
<div class="nav-btn"><button class="wrt-btn">Write an Article</button></div>
</div>
<div class="nav-right section">
<ul>
<li><a href="#" style="cursor: auto;">Log In</a></li>
<li><a href="#" style="cursor: auto;">Register</a></li>
</ul>
</div>
</div><!-- End of Navigation / Header -->
CSS:
Classie.js
Modernizer.Custom.js
SidebarEffects.js