The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Responsive Navigation Bar Problem, HTML, CSS, JavaScript problem
Richard5
post 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)
Attached File  style.css ( 1.98k ) Number of downloads: 99
Attached File  index.html.html ( 1.01k ) Number of downloads: 100
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 6 2021, 04:49 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:17 PM