Responsive Navigation Bar Problem, HTML, CSS, JavaScript problem |
Responsive Navigation Bar Problem, HTML, CSS, JavaScript problem |
Richard5 |
Mar 5 2021, 02:52 AM
Post
#1
|
Group: Members Posts: 1 Joined: 5-March 21 Member No.: 27,834 |
Hello everyone,
I found this Responsive Navigation Bar (https://www.codeply.com/p/hVa3gv9Umw) and I am having now a problem with it. The problem occurs when the screen is toggeld to width=768px; at this point the Nav Bar switches to moblie mode. If I open up the html file(all saved on my pc) in my webbrowser, the menu button (3 horizontal lines) do not appear. I have been trying to fix it for hours now, but I did not make any progress. I would appriciate it a lot if someone could help me! My HTML (index.html): <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2? family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1 ,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"> <<link rel="stylesheet" href="style.css"> <title>NAVIGATIOn</title> </head> <body> <nav> <div class="logo"> <h4>The Nav</h4> </div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Projects</a></li> </ul> <div class="burger"></div> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </nav> <script src="app.js"></script> </body> </html> My JavaScript(app.js): function navSlide() { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav-links"); const navLinks = document.querySelectorAll(".nav-links li"); burger.addEventListener("click", () => { //Toggle Nav nav.classList.toggle("nav-active"); //Animate Links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = "" } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`; } }); //Burger Animation burger.classList.toggle("toggle"); }); } navSlide(); My Css (style.css): * { margin: 0; padding: 0; box-sizing: border-box; } nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: #5D4954; font-family: 'Poppins', sans-serif; } .logo { color: rgb(226, 226, 226); text-transform: uppercase; letter-spacing: 5px; font-size: 20px; } .nav-links { display: flex; justify-content: space-around; width: 30%; } .nav-links li { list-style: none; } .nav-links a { color: rgb(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; } .burger { display: none; } .burger div { width: 25px; height: 3px; background-color: rgb(226, 226, 226); margin: 5px; transition: all 0.3s ease; } @media screen and (max-width: 1024px) { .nav-links { width: 60%; } } @media screen and (max-width: 768px) { body { overflow-x: hidden; } .nav-links { position: fixed; right: 0px; height: 92vh; top: 8vh; background-color: #5D4954; display: flex; flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; } .nav-links li { opacity: 1; } .burger { display: block; cursor: pointer; } } .nav-active { transform: translateX(0%); } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); } .toggle .line2 { opacity: 0; } .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); } Attached File(s) style.css ( 1.98k ) Number of downloads: 99 index.html.html ( 1.01k ) Number of downloads: 102 |
pandy |
Mar 6 2021, 04:49 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
What's supposed to create the menu button? I don't see it right off and am too lazy to search for it.
|
Lo-Fi Version | Time is now: 24th April 2024 - 06:24 AM |