Problem with button for menu, toggle function doesnt work
Question
I have a problem with the button for a menu on smaller screen size devices (under 700px width). The toggle function doesn't work. I don't know what is wrong. I have set a button to show in screen size less than 700px, hide my social menu, and gave a real menu proper width. Also, I have set CSS for a class of "show", but I don't know how to sign it on "main-nav ul". I hope you get me. Here is my HTML, CSS and, JS code:
HTML with JS script on the end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Responsive Navigation Menu Bar</title>
</head>
<body>
<section class="top-bar">
<div class="container">
<div class="top-bar-content">
<div class="logo">
<img src="img/Logo.png" alt="Gravitarium logo">
</div>
<div class="info flex">
<div class="info-content flex">
<div class="icon">
<i class="fas fa-phone"></i>
</div>
<div class="infos">
<a href="tel:+180045678923"><p>Have Any Questions?</p></a>
<p>+1-800-456-789-23</p>
</div>
</div>
<div class="info-content flex">
<div class="icon">
<i class="fas fa-map-marked-alt"></i>
</div>
<div class="infos">
<p>Visit Us Daily</p>
<p>My Street 69, Novi Sad</p>
</div>
</div>
<div class="info-content flex">
<div class="icon">
<i class="fas fa-hourglass-half"></i>
</div>
<div class="infos">
<p>Our Working Hours</p>
<p>Mon-Fri: 8.00 - 18.00</p>
</div>
</div>
</div>
</div>
</div>
</section>
<navigation class="menu">
<div class="container">
<div class="menu-btn">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="nav flex">
<div class="main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="social-nav">
<ul >
<li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://pinterest.com" target="_blank"><i class="fab fa-pinterest"></i></a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://github.com" target="_blank"><i class="fab fa-github"></i></a></li>
</ul>
</div>
</div>
</div>
</navigation>
<script>
document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('.main-nav ul').classList.toggle('.show'));
</script>
</body>
</html>
=====CSS=====
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500&display=swap');
:root {
--pc: #f7941d; /*Primary Color*/
--sc: #cfcfcf; /*Secondary Color*/
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Work Sans', sans-serif;
}
img {
width: 100%;
}
body {
background: var(--sc);
}
a, ul {
list-style: none;
text-decoration: none;
color: #000;
}
.container {
max-width: 1200px;
padding: 0 10px;
margin: 0 auto;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar {
background: #333;
padding: 20px 0 40px 0;
}
.top-bar-content {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
}
.top-bar-content .logo {
width: 35%;
}
.top-bar-content .info i {
color: var(--pc);
margin-right: 20px;
font-size: 30px;
}
.top-bar-content .infos p:first-child {
margin-bottom: 10px;
color: var(--sc) !important;
font-weight: 200;
}
.top-bar-content .infos p:last-child {
color: #fff;
}
@media (max-width: 1024px) {
.top-bar-content .info-content {
flex-direction: column;
text-align: center;
}
.top-bar-content .info i {
font-size: 24px;
margin-bottom: 5px;
}
.top-bar-content .infos p:first-child {
margin-bottom: 2px;
}
}
@media (max-width: 768px) {
.top-bar-content .info i {
font-size: 18px;
margin-bottom: 5px;
}
.top-bar-content .infos p {
font-size: 14px;
}
}
@media (max-width: 700px) {
.top-bar-content .info i {
display: none;
}
.top-bar-content .info {
flex-direction: column;
}
.top-bar-content .infos {
margin-bottom: 15px;
border-bottom: 1px dashed var(--sc);
}
.top-bar-content .logo {
width: 100%;
}
}
/* Navigation Style */
.menu .container {
background-color: #fff;
padding: 30px;
border-radius: 5px;
margin-top: -30px;
}
.menu .nav {
display: grid;
grid-template-columns: 2fr 1fr;
}
.menu .main-nav ul,
.menu .social-nav ul {
display: flex;
align-items: center;
}
.menu .social-nav ul {
justify-content: flex-end;
}
.menu .main-nav ul li:nth-child(n+1) {
margin-right: 30px;
}
.menu .main-nav ul li a {
font-weight: 500;
}
.menu .main-nav ul li a:hover {
color: var(--pc);
transition: .3s;
border-bottom: 5px solid var(--pc);
}
.menu .social-nav ul li:nth-last-child(n+2) {
margin-right: 30px;
}
.menu .social-nav ul li a {
font-size: 20px;
}
.menu .social-nav ul li a:hover {
color: var(--pc);
transition: .3s;
}
.menu .social-nav ul li:hover {
transform: rotate(720deg);
transition: 1s;
}
.menu-btn {
cursor: pointer;
position: absolute;
top: 130px;
right: 30px;
z-index: 2;
display: none;
}
@media (max-width: 968px) {
.social-nav {
display: none;
}
.menu .nav {
grid-template-columns: auto;
}
}
@media (max-width: 700px) {
.menu-btn {
display: block;
top: 195px;
}
.menu-btn:hover {
color: var(--pc);
transition: .3s;
}
.menu .main-nav ul {
display: block;
position: absolute;
top: 0;
left: 0;
background: #f2f2f2;
width: 50%;
height: 100%;
border-right: 1px solid #ccc;
opacity: 0.9;
padding: 20px 0 0 20px;
transform: translateX(-500px);
}
.menu .main-nav ul.show {
transform: translateX(0px);
}
.menu .main-nav ul li {
padding: 10px;
border-bottom: 1px dashed #ccc;
font-size: 14px;
}
.menu .main-nav ul li:last-child {
border-bottom: 0;
}
}
3 answers
solution1
0 2021-03-13 08:20:22
Why don't you use bootstrap for this? https://getbootstrap.com/docs/4.0/components/navbar/ under a certain width it will automatically collapse and you will be able to click on it to toggle it
solution2
0 2021-03-13 11:03:55
You querySelector this: ('.main-nav ul')
Maybe it should be: ('.menu.main-nav ul')
solution3
0 ACCPTED 2021-03-13 13:27:47
When I change your script a little, it seems to work:
document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('.menu .main-nav ul').classList.toggle('show'));
Main problem might have been that you tried to toggle '.show' instead of 'show' (without the dot)?
Also the first querySelector was for the 'click' event (.menu-btn) and the second querySelector for the menu (.menu.main-nav ul).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
mobile menu toggle button doesnt close
Opacity toggle doesnt work
Why won't my toggle menu function work for a div (instead of a button) FIXED
loop through radio button, function doesnt work
Bootstrap template “toggle menu” button does not work in Angular
Push menu toggle button
Toggle button in menu
mootools toggle button problem
in toggle function the data() or attr('data-menu') not work
JavaScript function menu toggle
Related Tags