I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.
I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.
I can't find the mistake myself. Is there even a simpler way?
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
toggleButton.addEventListener('click' ,function (){
navbarLinks.classList.toggle('active')
});
/* Basic/Boiler css */
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
/* nav bar */
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: white;
}
.navbar-logo{
width: 10rem;
height: 3rem;
margin: 0.5rem;
border-radius: 4px;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li{
list-style: none;
transition: font-size 0.5s ease-out 100ms;
}
.navbar-links li a{
text-decoration: none;
color: white;
padding-right: 1rem;
display: block;
}
.navbar-links li:hover{
font-size: 1.4rem;
}
/* Responsive Navbar */
.toggle-button{
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
#media (max-width: 650px){
.toggle-button{
display: flex;
}
.navbar-links{
width: 100%;
}
.navbar-links ul{
flex-direction: column;
width: 100%;
display: none;
}
.navbar-links li a{
padding: 10px;
}
.navbar-links li{
text-align: center;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="/logo.png" type="image/jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="front.js"></script>
</body>
</html>
I repeat Again The hamburger appers alright but when i click it it dose not respond
You forgot to add class .active in your CSS file. Also, your .navbar-links should have display:none; instead of its list.
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
toggleButton.addEventListener('click', function() {
navbarLinks.classList.toggle('active');
});
/* Basic/Boiler css */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
/* nav bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: white;
}
.navbar-logo {
width: 10rem;
height: 3rem;
margin: 0.5rem;
border-radius: 4px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
transition: font-size 0.5s ease-out 100ms;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding-right: 1rem;
display: block;
}
.navbar-links li:hover {
font-size: 1.4rem;
}
/* Responsive Navbar */
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
#media (max-width: 650px) {
.toggle-button {
display: flex;
}
.navbar-links {
width: 100%;
display: none;
}
.active {
display: block;
padding: 25px;
color: white;
font-size: 25px;
box-sizing: border-box;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
}
.navbar-links li a {
padding: 10px;
}
.navbar-links li {
text-align: center;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links .active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="/logo.png" type="image/jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="front.js"></script>
</body>
</html>
You have set the style for the ul as display: none. display: none needs to be overridden when the active class is applied.
Add this rule ul {display: flex} at the end of the media query, your code should look something like this:
#media (max-width: 650px){
...
.navbar-links.active ul{
display: flex
}
}
Related
I am working on a school project I want to do a responsive text which is similar to the picture below and further when it switch to mobile view the text have to change its position and fit below the hero image.
how to change the size according to the screen size?
I am a beginner trying to learn things on my own.
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.img-hover-zoom {
height: 500px;
overflow: hidden;
float: left;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.5);
}
.hero-text {
grid-area:auto;
overflow: hidden;
text-align: left;
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: rgb(0, 0, 0);
}
h1 {
text-align: left;
text-transform: uppercase;
font-family: Agency FB, Helvetica, sans-serif;
font-size: 2em;
}
p {
font-size: 3vh;
font-family: Arial, Helvetica, sans-serif;
}
#media (max-width: 650px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="img-hover-zoom">
<img src="/img/hero.jpg" alt="This zooms-in really well and smooth" width="500px" height="500px">
</div>
<div class="hero-text">
<h1>Travel around the World</h1>
<br><br>
<p>Traveling is a very crucial part of life as it is the best way to get out of the busy schedule.
It is also to experience life in different ways.Traveling is actually a good remedy for stress, anxiety
and depression. It also improves the mental and physical health. We only have one life and
we should thank it for making us more advanced creature on this planet. Not only do we get to
experience the beauty of nature, different geographies ,topographies, and people.
</p>
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
on my website
how to avoid this unnecessary height in responsive view?
i tried everything but still not getting
and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger
var main = document.getElementById('main');
function clicked() {
main.classList.toggle("mystyle");;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.main {}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar {}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active,
.navbar ul li:hover {
border-bottom: 1px solid crimson;
}
.mystyle {
display: none;
}
/* mediaqueries */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>sample</title>
</head>
<body>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat
8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crin;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Programs
<ul>
<li> School Program</li>
<hr>
<li> Single Program</li>
<hr>
<li> Schedule</li>
<hr>
<li> Workshop and events</li>
<hr>
<li> Get Quote</li>
</ul>
</li>
<li class="">Blog</li>
<li class="">Shop</li>
<li class="">Elements</li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
</body>
</html>
Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?
You can use Browser development tools to find where stylings come from:
As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).
You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0
I have created a Navigation bar and that contain Toggle Button .The problem I am facing is in the responsive view, after clicking on the toggle button ,the toggle button hides and shows the navigation bar.
But after hiding the toggle button I want to show another button upon which clicking the navigation bar hides.
I don't understand what I'm doing wrong and what should I do?
Here is The code is:
let menuBar=document.querySelector('#menu-bar');
navBar=document.querySelector('.navbar');
menuBar.onclick=()=>{
menuBar.classList.add('hide');
// menuBar.classList.add('fa-times');
navBar.classList.add('show');
times();
}
let icon="fas fa-times";
function times(){
if(navBar.classList.contains('show')){
menuBar.innerHTML=`<i class="${icon}"></i>`;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow:5px 5px 7px rgba(0,0,0,0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1{
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul{
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li{
margin-right: 3rem;
}
header .navbar ul li a{
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar{
font-size: 20px;
cursor: pointer;
display:none;
}
/*media query*/
#media (max-width:768px){
html{
font-size: 55%;
}
header #menu-bar{
display: block;
}
header #menu-bar.hide{
opacity: 0;
pointer-events: none;
}
header .navbar{
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show{
opacity: 1;
}
header .navbar ul{
flex-flow: column;
padding: 2rem;
}
header .navbar ul li{
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a{
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times{
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>
Some notes:
It was not working previously because you did not remove the hide class after adding it to menuBar
You are nesting an icon in an icon - not recommended
You are performing unnecessary checks - you should just use classList.toggle() instead
Here's the working code:
let menuBar = document.querySelector('#menu-bar');
navBar = document.querySelector('.navbar');
menuBar.onclick = () => {
navBar.classList.toggle('hide');
navBar.classList.toggle('show');
times();
}
let icon = "fas fa-times";
function times() {
menuBar.classList.toggle('fa-times');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
header {
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li {
margin-right: 3rem;
}
header .navbar ul li a {
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar {
font-size: 20px;
cursor: pointer;
display: none;
}
/*media query*/
#media (max-width:768px) {
html {
font-size: 55%;
}
header #menu-bar {
display: block;
}
header #menu-bar.hide {
opacity: 0;
pointer-events: none;
}
header .navbar {
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show {
opacity: 1;
}
header .navbar ul {
flex-flow: column;
padding: 2rem;
}
header .navbar ul li {
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a {
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times {
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar hide">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>
When i click the mavbar toggler button, the toggler does not appear, it pops out immediately
i have seen this in youtube tutorial it was working fine for him but when i try it the toggler does not show, i don't know what the issue is and i checked the code also the code same
can anyone help to get rid of this issue
thanks in advance
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #195794;
padding: 0 !important;
}
.brand-title {
font-size: 1.5rem;
margin: 1rem;
color: white;
}
.navbar-links ul {
display: flex;
margin: 0;
}
.navbar-links ul li {
list-style: none;
}
.navbar-links ul li a {
text-decoration: none;
color: white;
padding: 1.2rem;
display: block;
}
.navbar-links ul li:hover {
background-color: #1d64aa;
}
.toggle-button {
position: absolute;
top: 1.3rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 2rem;
height: 1.4rem;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width:800px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title"> title</div>
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</nav>
Problem is in the JS
You need to disable a link by
toggleButton.addEventListener('click', (e) => {
e.preventDefault();
navbarLinks.classList.toggle('active')
})
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', (e) => {
e.preventDefault();
navbarLinks.classList.toggle('active')
})
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #195794;
padding: 0 !important;
}
.brand-title{
font-size: 1.5rem;
margin: 1rem;
color: white;
}
.navbar-links ul{
display: flex;
margin: 0;
}
.navbar-links ul li{
list-style: none;
}
.navbar-links ul li a{
text-decoration: none;
color: white;
padding: 1.2rem;
display: block;
}
.navbar-links ul li:hover{
background-color: #1d64aa;
}
.toggle-button{
position: absolute;
top: 1.3rem;
right:1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 2rem;
height: 1.4rem;
}
.toggle-button .bar{
height:3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width:800px){
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links ul li{
text-align: center;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Site.css">
</head>
<body>
<nav class="navbar">
<div class="brand-title"> title</div>
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</nav>
<script src="Site.js"></script>
</body>
</html>
Check your .toggle-button
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
Change it to div :
<div class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
Change your .toggle-button CSS:
.toggle-button:hover{
cursor: pointer
}
I want to use a .js script in my html file, but unfortunately my script does not work the right way :(. I build a responsive Navbar for my website with a "hamburger Menu" on small screensizes.
I managed it to show the "Hamburger Menu" on a smaller screensize but my navbarlinks don't show up if I click on it. Here my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
here my css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
and the important part I guess, my javascript:
const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
Sry for the lot of code, but I want to find the mistake with your help so I post all of my code. Thanks
it will be toggle-button not toggleButton in
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>