I have a sidebar that slides out 250px using javscript on the desktop view. When it comes to the mobile view I want the sidebar to take up 100% width. I am trying to use Media Queries in Javascript but no matter what changes I make It seems to overwrite my styles I have for my sidebar on the desktop view.
HTML
<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>
CSS
.navbar {
height: 100%;
width: 0;
position: fixed;
background: #141313;
}
.navbar .sidemenu-btn {
font-size: 2.5rem;
padding: 3rem 0;
text-align: center;
margin-left: 1rem;
cursor: pointer;
color: #141313;
}
.navbar .navbar-items {
display: flex;
flex-direction: column;
text-align: center;
display: none;
margin-left: 1rem;
}
.navbar .navbar-items a {
text-decoration: none;
color: white;
padding: 1.2rem 0;
font-weight: 400;
font-size: 1.2rem;
text-transform: uppercase;
}
.navbar .navbar-items a:hover {
text-decoration: line-through;
}
@media screen and (max-width: 768px) {
.navbar {
position: relative;
}
}
JS
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');
toggleBtn.addEventListener("click", sideMenu);
toggleBtn.addEventListener("click", mediaQuery);
function sideMenu() {
if (toggleNav.style.width === "250px") {
toggleNav.style.width = "0px";
} else {
toggleNav.style.width = "250px";
}
}
function mediaQuery() {
const x = window.matchMedia('(max-width: 768px)');
const y = document.querySelector('.navbar');
if (x.matches && y.style.width === "100%") {
y.style.width = "0px";
} else {
y.style.width = "100%";
}
}
Media queries can do the work. You don't need js for changing the width of the navbar-items
. See this
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
const togglenavItems = document.querySelector('.navbar-items');
toggleBtn.addEventListener("click", sideMenu);
function sideMenu() {
toggleNav.classList.toggle('open');
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
height: 100%;
width: 100%;
position: fixed;
}
.sidemenu-btn {
font-size: 2.5rem;
padding: 0;
text-align: center;
cursor: pointer;
color: green;
position: absolute;
right: 20px;
top: 20px;
}
.navbar-items {
display: flex;
flex-direction: column;
text-align: center;
width: 250px;
height: 100%;
padding-left: 1rem;
background: #141313;
transition: all .5s ease;
}
.navbar .navbar-items a {
text-decoration: none;
color: white;
padding: 1.2rem 0;
font-weight: 400;
font-size: 1.2rem;
text-transform: uppercase;
}
.navbar .navbar-items a:hover {
text-decoration: line-through;
}
@media (max-width: 768px) {
.navbar-items {
width: 100%;
}
}
.navbar.open .navbar-items {
width: 0;
}
<nav class="navbar">
<div id="toggle-btn" class="sidemenu-btn">
<i class="fas fa-bars"></i>
Toggle
</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>
Just adding the media query you can change the width of the element, no need to check in js
@media (max-width: 768px) {
.navbar-items {
width: 100%;
}
}
Adding a .open
class that will be added on the .navbar
and will trigger the transition
.navbar.open .navbar-items {
width: 0;
}
Your js was now simplified
const toggleBtn = document.querySelector("#toggle-btn");
const toggleNav = document.querySelector(".navbar");
toggleBtn.addEventListener("click", sideMenu);
function sideMenu() {
toggleNav.classList.toggle('open');
}