I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am encountering issues where the styles for the sidebar on the desktop view are being overwritten.
Here is the code structure:
<nav class="navbar">
<div id="toggle-btn" class="sidemenu-btn">
<i class="fas fa-bars"></i>
</div>
<div id="toggle-nav" class="navbar-items animated fadeInLeft delay-1s">
<a href="#home">Home</a>
<a href="#about-me">About</a>
<a href="#my-skills">Skills</a>
<a href="#my-portfolio">Portfolio</a>
<a href="#contact-me">Contact</a>
</div>
</nav>
This is the CSS styling applied to the navbar:
.navbar {
height: 100%;
width: 0;
position: fixed;
background: #141313;
}
/* Other CSS styles for the navbar */
@media screen and (max-width: 768px) {
.navbar {
position: relative;
}
}
And here is the JavaScript code handling the toggle functionality based on screen size:
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
toggleBtn.addEventListener("click", sideMenu);
toggleBtn.addEventListener("click", mediaQuery);
function sideMenu() {
// Functionality to toggle the sidebar width
}
function mediaQuery() {
// Functionality for applying responsive design based on screen width
}