Hello I have been trying to add a responsive navigation menu to my website layout but I am facing a few issues. I have used CSS and some Vanilla JS to create the responsive menu bar.
The responsiveness works almost as intended, however when the screen size is shrunk the hamburger menu and close button are not responsive. You cannot click it to show the menu it is just their unresponsive as seen in the picture below.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
header .btn {
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
header.sticky {
/* background: pink; */
}
.main-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
height: 50px;
-webkit-box-align: center;
cursor: pointer;
vertical-align: middle;
border: 3px double #fff;
}
.header-container {
background-image: linear-gradient(
to bottom right,
rgb(74, 136, 109),
rgb(89, 156, 120)
);
margin-left: auto;
margin-right: auto;
margin: 0 auto;
margin-top: -15px;
position: fixed;
top: 0px;
left: 0;
z-index: 1000;
width: 100%;
transition: 0.6s;
}
.logo {
display: inline-block;
vertical-align: middle;
margin-right: 65px;
font-size: 30px;
}
.nav-links {
justify-content: flex-end;
flex: 1 1 0%;
-webkit-box-pack: end;
vertical-align: middle;
position: relative;
}
.menu-link1 {
align-items: center;
color: rgb(51, 51, 51);
display: flex;
font-size: 0.95rem;
text-decoration: none;
font-weight: 700;
font-family: Poppins, sans-serif;
padding-top: 22px;
}
.menu-link1:hover {
color: rgb(255, 255, 255);
font-weight: bold;
border-top: 5px solid transparent;
scroll-padding-top: 65px;
}
.menu-link1:active {
text-align: center;
font-style: italic;
}
.menu-link2 {
text-decoration: none;
padding-top: 22px;
display: flex;
font-weight: 700;
color: rgb(51, 51, 51);
font-family: Poppins, sans-serif;
font-size: 0.95rem;
align-items: center;
}
.menu-link2:hover {
color: rgb(255, 255, 255);
font-weight: bold;
border-top: 5px solid transparent;
scroll-padding-top: 65px;
}
.menu-link2:active {
text-align: center;
font-style: italic;
}
.menu-link3 {
text-align: center;
padding-top: 22px;
text-decoration: none;
font-weight: 700;
display: flex;
font-size: 0.95rem;
color: rgb(51, 51, 51);
font-family: Poppins, sans-serif;
}
.menu-link3:hover {
color: rgb(255, 255, 255);
font-weight: bold;
scroll-padding-top: 65px;
border-top: 5px solid transparent;
}
.menu-link3:active {
text-align: center;
font-style: italic;
}
.menu-link4 {
text-align: center;
text-decoration: none;
padding-top: 22px;
font-family: Poppins, sans-serif;
font-weight: 700;
color: rgb(51, 51, 51);
font-size: 0.95rem;
display: flex;
}
.menu-link4:hover {
color: rgb(255, 255, 255);
font-weight: bold;
scroll-padding-top: 65px;
}
.menu-link4:active {
text-align: center;
font-style: italic;
}
.menu-link5 {
text-align: center;
text-decoration: none;
padding-top: 22px;
font-weight: 700;
font-size: 0.95rem;
color: rgb(51, 51, 51);
font-family: Poppins, sans-serif;
display: flex;
}
.menu-link5:hover {
text-align: center;
color: rgb(255, 255, 255);
border-top: 5px solid transparent;
scroll-padding-top: 65px;
}
.menu-link5:active {
text-align: center;
font-style: italic;
}
nav a:link {
margin-right: 30px;
display: inline-block;
float: left;
}
body {
position: relative;
overflow-x: hidden;
overscroll-behavior: none;
height: 200vh;
}
*,
::before,
::after {
box-sizing: inherit;
}
@media (max-width: 1060px) {
header .btn {
display: block;
z-index: 350;
}
header .nav-links {
position: fixed;
flex-direction: column;
width: 250px;
height: 50vh;
top: 0;
right: -100%;
padding: 80px 50px;
background: #1483d5;
transition: 0.5s;
transition-property: right;
z-index: 111;
}
header .nav-links .close-btn {
position: absolute;
top: 0;
left: 0;
margin: 25px;
}
header .nav-links a {
display: block;
font-size: 18px;
margin: 20px;
padding: 0 15px;
text-align: center;
z-index: 300;
}
header .nav-links.active {
right: 0;
}
.container .donate {
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
<link href="shop.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="activePage.js"></script>
</head>
<body>
<div class="header-container">
<header class="main-header">
<h1 class="logo">Animal Charity</h1>
<nav class="nav-links">
<div class="btn">
<i class="fas fa-times close btn"></i>
</div>
<a class="menu-link1" href="about.html">About us</a>
<a class="menu-link2" href="our-work.html">Our Work</a>
<a class="menu-link3" href="success.html">Success Stories</a>
<a class="menu-link4" href="shop.html">Shop</a>
<a class="menu-link5" href="contact.html">Contact us</a>
</nav>
<div class="container">
<a class="donate" href="donate.html">Donate</a>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
</div>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle('sticky', window.scrollY > 0);
});
var menu = document.querySelector('.nav-links');
var menuBtn = document.queryselector('.menu-btn');
var closeBtn = docuemnt.querySelector('.close-btn');
menuBtn.addEventListener("click", () => {
menu.classList.add('active');
});
closeBtn.addEventListener("click", () =>{
menu.classList.remove('active');
});
</script>
</body>
<footer>
<div class="footer-container">
<div class="socials">
<h4>Follow us</h4>
<a href="" title="Instagram" target="blank"><i class="fab fa-instagram"></i></i></a>
<a href="" title="Twitter" target="blank"><i class="fab fa-twitter"></i></a>
<a href="" title="Facebook" target="blank"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="footer-links">
<a class="footer-link1" href="shop.html" title="Shop">Shop</a>
<a class="footer-link2" href="contact.html">Conact us</a>
<p>Park Pets © 2022</p>
</div>
</div>
</footer>
</html>There is also a button in the main menu which is revealed on larger device screens but I have removed it for the responsive layout for the moment.
One thing I have noticed is that when I add .active to the media query in the CSS file
header .nav-links.active {
right: 0;}
the whole menu disappears which is also intended but the menu button is still not functional. One thing I should also mention in case it is affecting the code in anyway is that the header menu is fixed in order to show at the top of the page even when scrolling.
Could the issue be due to positioning of elements or their display? Or perhaps my JS script is not performing right.
Thanks a lot for any suggestions and advice!