Stop the Image Scrolling when it reached Nav bar CSS and Javascript - javascript

I am trying to figure out how to stop the image from moving/scrolling up before it reached the nav bar using javascript and css. but it still can scroll down.
I will really appreciate any help in advance thank you.
I attached the image of the desire output
My code is below
https://codesandbox.io/s/html-css-navbar-forked-06mjm0?file=/src/styles.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar</title>
<link rel="stylesheet" href="../src/styles.css" />
</head>
<body>
<nav>
<div class="logo">
Brand name
</div>
<div class="menuIcon">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li class="nav-item active">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div class="mainSec">
<div id="animatedDiv"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>
index.js
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
50 - (scrollVal * 100) / 1500 <= 10
? (aDiv.style.width = "10%")
: (aDiv.style.width = 50 - (scrollVal * 100) / 1500 + "%");
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
const menuIcon = document.querySelector(".menuIcon");
const menuIcons = document.querySelectorAll(".menuIcon .line");
const navLinks = document.querySelector(".nav-links");
const items = document.querySelectorAll(".nav-links li");
const logo = document.querySelector(".logo");
menuIcon.addEventListener("click", () => {
navLinks.classList.toggle("open");
logo.classList.toggle("close");
items.forEach((item) => {
item.classList.toggle("fade");
});
menuIcons.forEach((Icon) => {
Icon.classList.toggle("open");
});
});
const menu = document.querySelector(".nav-links");
const menuItems = document.querySelectorAll(".nav-links li");
menuItems.forEach((item) => {
item.addEventListener("click", function () {
menu.querySelector(".active").classList.remove("active");
item.classList.add("active");
});
});
style.css
.mainSec {
width: 100%;
display: flex;
justify-content: center;
}
#animatedDiv {
background: url("https://media.tenor.com/images/34b16b199449136a845ea0300ff2cef3/raw")
no-repeat;
min-height: 200vh;
width: 50%;
position: absolute;
margin-top: 20%;
}
#secondPage {
background: url("https://www.downloadclipart.net/large/doraemon-png-free-download.png")
no-repeat;
display: block;
width: 50%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
position: fixed;
height: 10vh;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
width: 100%;
}
nav .logo a {
color: white;
font-size: 1.5rem;
text-decoration: none;
display: flex;
text-align: center;
margin: 0px 10px;
}
nav .nav-links {
list-style: none;
margin-left: auto;
}
.nav-links li {
display: inline-block;
}
.nav-links .active {
background-color: black;
border: 2px solid black;
border-radius: 10px;
}
nav .nav-links li a {
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 0px 10px;
}
#media screen and (max-width: 768px) {
nav {
position: relative;
display: block;
}
.logo {
height: 10vh;
display: flex;
align-items: center;
}
.logo a {
text-align: center;
}
nav .menuIcon {
position: absolute;
cursor: pointer;
top: 30%;
right: 5%;
}
nav .menuIcon .line {
width: 30px;
margin: 5px 0px;
height: 3px;
background-color: white;
position: relative;
}
nav .menuIcon .line:nth-child(1).open {
transform: rotate(45deg);
width: 40px;
height: 5px;
left: 0px;
top: 16px;
transition: all 1s ease;
}
nav .menuIcon .line:nth-child(2).open {
opacity: 0;
}
nav .menuIcon .line:nth-child(3).open {
transform: rotate(-45deg);
width: 40px;
height: 5px;
transition: all 1s ease;
}
nav .nav-links {
margin-top: -10px;
padding: 0px;
height: 90vh;
width: 100%;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
flex-direction: column;
clip-path: circle(50px at 90% -10%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
}
.nav-links li {
margin: 40px 0px;
}
nav .nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.8s;
}
li.fade {
opacity: 1;
}
.logo.close {
visibility: hidden;
}
}

Min Height of #animatedDiv should be set to 87vh instead of 200vh it worked for me. No need to change the JS. See output:
visit
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
50 - (scrollVal * 100) / 1500 <= 10 ?
(aDiv.style.width = "10%") :
(aDiv.style.width = 50 - (scrollVal * 100) / 1500 + "%");
}
window.addEventListener(
"scroll",
function() {
requestAnimationFrame(changeWidth);
},
false
);
const menuIcon = document.querySelector(".menuIcon");
const menuIcons = document.querySelectorAll(".menuIcon .line");
const navLinks = document.querySelector(".nav-links");
const items = document.querySelectorAll(".nav-links li");
const logo = document.querySelector(".logo");
menuIcon.addEventListener("click", () => {
navLinks.classList.toggle("open");
logo.classList.toggle("close");
items.forEach((item) => {
item.classList.toggle("fade");
});
menuIcons.forEach((Icon) => {
Icon.classList.toggle("open");
});
});
const menu = document.querySelector(".nav-links");
const menuItems = document.querySelectorAll(".nav-links li");
menuItems.forEach((item) => {
item.addEventListener("click", function() {
menu.querySelector(".active").classList.remove("active");
item.classList.add("active");
});
});
.mainSec {
width: 100%;
display: flex;
justify-content: center;
}
#animatedDiv {
background: url("https://media.tenor.com/images/34b16b199449136a845ea0300ff2cef3/raw") no-repeat;
display: block;
min-height: 87vh;
width: 50%;
position: absolute;
margin-top: 25%;
z-index: 4;
}
#secondPage {
background: url("https://www.downloadclipart.net/large/doraemon-png-free-download.png") no-repeat;
display: block;
width: 50%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
position: fixed;
height: 10vh;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
width: 100%;
z-index: 6;
}
nav .logo a {
color: white;
font-size: 1.5rem;
text-decoration: none;
display: flex;
text-align: center;
margin: 0px 10px;
}
nav .nav-links {
list-style: none;
margin-left: auto;
}
.nav-links li {
display: inline-block;
}
.nav-links .active {
background-color: black;
border: 2px solid black;
border-radius: 10px;
}
nav .nav-links li a {
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 0px 10px;
}
/*responsive*/
#media screen and (max-width: 768px) {
nav {
position: relative;
display: block;
}
.logo {
height: 10vh;
display: flex;
align-items: center;
}
.logo a {
text-align: center;
}
nav .menuIcon {
position: absolute;
cursor: pointer;
top: 30%;
right: 5%;
}
nav .menuIcon .line {
width: 30px;
margin: 5px 0px;
height: 3px;
background-color: white;
position: relative;
}
nav .menuIcon .line:nth-child(1).open {
transform: rotate(45deg);
width: 40px;
height: 5px;
left: 0px;
top: 16px;
transition: all 1s ease;
}
nav .menuIcon .line:nth-child(2).open {
opacity: 0;
}
nav .menuIcon .line:nth-child(3).open {
transform: rotate(-45deg);
width: 40px;
height: 5px;
transition: all 1s ease;
}
nav .nav-links {
margin-top: -10px;
padding: 0px;
height: 90vh;
width: 100%;
background-color: rgb(12, 77, 151);
display: flex;
align-items: center;
flex-direction: column;
clip-path: circle(50px at 90% -10%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
}
.nav-links li {
margin: 40px 0px;
}
nav .nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.8s;
}
li.fade {
opacity: 1;
}
.logo.close {
visibility: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar</title>
<link rel="stylesheet" href="../src/styles.css" />
</head>
<body>
<nav>
<div class="logo">
Brand name
</div>
<div class="menuIcon">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li class="nav-item active">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div class="mainSec">
<div id="animatedDiv"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>
It would be best if you changed the CSS for responsiveness.

Related

Proper way to close responsive navbar menu on click of link (in same page)

So, I have a navbar with a (burger icon animation on mobile view) and when I click a link I want the navbar to close & the burger icon cross animation to reverse to normal.
NOTE: This already worked on my previous builds. But since this is a one pager and the link goes out to a section of my page it does not automaticly refresh the page. (Like in my previous projects). I want to do it in vanilla js (so no JQuery).
NOTE2 : This will mainly be a JS problem, but I added the css of the nav just in case.
Thanks in advance
My html code :
<nav id="navbar" class="c-nav">
<div class="logo">
<a href="index.html">
<img class="logo_size" src="./images/Dumotech1.png" alt="Logo van Minter">
</a>
</div>
<ul class="nav-links">
<li><a class="c-underline" href="#about">Over ons</a></li>
<li><a class="c-underline" href="#services">Diensten</a></li>
<li><a class="c-underline" href="#projects">Projecten</a></li>
<li><a class="c-underline" href="#contact">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
Css :
.c-nav {
/* overflow-x: hidden; */
text-transform: uppercase;
position: fixed;
z-index: 4;
top: 0;
width: 100%;
height: 5rem;
display: flex;
justify-content: space-around;
align-items: center;
vertical-align: middle;
min-height: 8vh;
background-color: rgb(0, 0, 0);
font-family: 'Raleway', sans-serif;
}
#navbar {
background-color:rgb(0, 0, 0);
position: fixed;
top: 0;
width: 100%;
transition: top 0.5s ease;
}
.logo_size {
max-width: 16rem;
max-height: auto;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 20%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
position: relative;
top: 0.5rem;
color: rgb(255, 255, 255);
font-family: 'Raleway', sans-serif;
text-decoration: none;
letter-spacing: 3px;
font-weight: regular;
font-size: 14px;
padding: 0 1px;
display: inline-block;
}
.c-underline::after {
background: none repeat scroll 0 0 transparent;
bottom: -3px;
content: "";
display: inline-block;
height: 2px;
left: 50%;
position: absolute;
background: rgb(194, 12, 12);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.c-underline:hover::after {
display: inline-block;
width: 100%;
left: 0;
}
.nav-links a:hover {
color: rgb(194, 12, 12);
text-decoration: none;
}
.burger {
display: none;
}
.burger div {
width: 35px;
height: 4px;
background-color: rgb(255, 255, 255);
margin: 8px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links a {
position: relative;
top: 0;
}
}
#media screen and (max-width: 780px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 1920px) {
.nav-links {
width: 40%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: rgb(0, 0, 0);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
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.3}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}

Menu burger animation triggered by clicking anywhere on the screen

I followed a tutorial on how to create an animated menu burger, but there are a few bugs. The animation works the way I want it to so far, but it's triggered regardless of where I click on the page. I've provided the code here:
const toggleMenu = document.querySelector(
'.menu-btn');
let isOpen = false;
document.addEventListener('click', () => {
if (!isOpen) {
toggleMenu.classList.add('open');
isOpen = true;
} else {
toggleMenu.classList.remove('open');
isOpen = false;
}
});
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.menu {
grid-area: menu;
grid-column: span 1;
display: flex;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
}
.menu-btn {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
transition: all .5s ease-in-out;
//border: 2px solid #fff;
}
.btn-mid {
position: relative;
width: 25px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.btn-mid::before,
.btn-mid::after {
position: absolute; /*Necessary for 3 bars*/
content:'';
width: 25px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.btn-mid::before {
transform: translateY(-300%);
}
.btn-mid::after {
transform: translateY(300%);
}
.top-menu {
transition: all .5s ease-in-out;
position: absolute;
bottom: 100%; /*So that we can't initially see*/
width: 100%;
height: 50vh;
z-index: -1;
background: #000;
}
.top-menu-box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}
.top-menu-box ul {
list-style: none;
text-align: center;
}
.top-menu-box ul li:hover {
border-bottom: 2px solid #fff;
transition: 0.25s;
}
.top-menu-box ul li a {
color: #fff;
}
/*BUTTON ANIMATION*/
.menu-btn.open .btn-mid {
transform: translateX(-175%);
background: transparent;
}
.menu-btn.open .btn-mid::before {
transform: rotate(45deg) translate(125%, -1050%);
}
.menu-btn.open .btn-mid::after {
transform: rotate(-45deg) translate(125%, 1050%);
}
.menu-btn.open .top-menu {
bottom: 50%;
}
.menu-btn.open .top-menu-box {
width: 100%;
}
/*END*/
.nav-test {
display: flex;
direction: row;
overflow: hidden;
justify-content: space-around;
padding: 0; //By default, padding is set
list-style-type: none;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu">
<div class="menu-btn">
<div id="middle" class="btn-mid"></div>
</div>
<script src="response.js"></script>
</div>
<div class="top-menu">
<div class="top-menu-box">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</head>
</html>
I used percentages for the attribute values because I want it to adjust according to the size of the screen.
I also noticed that when I view it from my desktop, the animation seems kind of choppy. Does anyone have any advice on what to do?
By the way, I know there's an extra bullet list, and this is for a sliding menu that opens when the burger is pressed, but that's unrelated.
You use document.addEventListener, change this with toggleMenu.addEventListener
const toggleMenu = document.querySelector(
'.menu-btn');
let isOpen = false;
toggleMenu.addEventListener('click', () => {
if (!isOpen) {
toggleMenu.classList.add('open');
isOpen = true;
} else {
toggleMenu.classList.remove('open');
isOpen = false;
}
});
.grid-container {
display: grid;
grid-template-areas: "header menu";
grid-template-columns: repeat(8, 1fr);
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: black;
}
.menu {
grid-area: menu;
grid-column: span 1;
display: flex;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
}
.menu-btn {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
transition: all .5s ease-in-out;
//border: 2px solid #fff;
}
.btn-mid {
position: relative;
width: 25px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.btn-mid::before,
.btn-mid::after {
position: absolute; /*Necessary for 3 bars*/
content:'';
width: 25px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.btn-mid::before {
transform: translateY(-300%);
}
.btn-mid::after {
transform: translateY(300%);
}
.top-menu {
transition: all .5s ease-in-out;
position: absolute;
bottom: 100%; /*So that we can't initially see*/
width: 100%;
height: 50vh;
z-index: -1;
background: #000;
}
.top-menu-box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}
.top-menu-box ul {
list-style: none;
text-align: center;
}
.top-menu-box ul li:hover {
border-bottom: 2px solid #fff;
transition: 0.25s;
}
.top-menu-box ul li a {
color: #fff;
}
/*BUTTON ANIMATION*/
.menu-btn.open .btn-mid {
transform: translateX(-175%);
background: transparent;
}
.menu-btn.open .btn-mid::before {
transform: rotate(45deg) translate(125%, -1050%);
}
.menu-btn.open .btn-mid::after {
transform: rotate(-45deg) translate(125%, 1050%);
}
.menu-btn.open .top-menu {
bottom: 50%;
}
.menu-btn.open .top-menu-box {
width: 100%;
}
/*END*/
.nav-test {
display: flex;
direction: row;
overflow: hidden;
justify-content: space-around;
padding: 0; //By default, padding is set
list-style-type: none;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="menu_design.css">
<head>
<div class="grid-container">
<div class="item header">
<ul class="nav-test">
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu">
<div class="menu-btn">
<div id="middle" class="btn-mid"></div>
</div>
<script src="response.js"></script>
</div>
<div class="top-menu">
<div class="top-menu-box">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</head>
</html>

Hamburger button is not on the right place

I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>

Neat UX Trick Not working. How can I fix it?

Question
The Commented code at the top of the javascript is my attempt to make it so that the relevant chosen button tab (on the nav bar changes color, gets a background etc). But when I uncomment the code at the top, not only does it not work, but the hamburger menu stops working too!
How can I adjust it to make the class work (so that the selected tab is made obvious to the user)?
My Code
//Nav Bar!!
//Button selected gets color change
/*
const selectedNav = document.querySelectorAll('li');
selectedNav.forEach((item)=>{
document.selectedNav.addEventListener('click', navChange)
})
function navChange(event){
ul.forEach((item)=>{
item.classList.remove('add-this-to-selected-section');
})
event.target.classList.add('add-this-to-selected-section');
}
*/
const navSlide = () =>{
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
// Toggle Nav
burger.addEventListener('click',()=>{
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();
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: #245871;
text-decoration: none;
letter-spacing: 3px;
font-weight: 800;
font-size: 18px;
}
.add-this-to-selected-section{
color: white;
background-color: #245871;
padding: 5px;
border-radius: 5px;
}
.burger div{
width: 25px;
height: 3px;
background-color: #245871;
margin: 5px;
transition: all 0.3s ease;
}
.burger{
display: none;
cursor: pointer;
}
#media screen and (max-width: 1024){
.nav-links{
width: 70%;
cursor: pointer;
font-weight: 1200;
}
}
#media screen and (max-width: 997px){
body{
overflow-x: hidden;
}
nav{
color: white;
}
.head-btn{
color: white;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #245871;
color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a{
opacity: 1;
color: white;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
color: white;
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
} to {
opacity: 1;
transform: translateX(0px);
}
}
<div class="logo">
<h4>xxx</h4>
</div>
<ul class="nav-links">
<li class=".home-btn">xxx</li>
<li class=".exchange-btn">xxx</li>
<li class=".debit-btn">xxx</li>
<li class=".crypto-btn">xxx</li>
<li class=".stock-btn">xxx</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
Your help is greatly appreciated :)
Your background color for that class was the same, and also your javascript for that functionality had some problems. Here's how it should be:
const selectedNav = document.querySelectorAll('li');
const navChange = (index) => {
selectedNav.forEach((item)=>{
item.classList.remove('add-this-to-selected-section');
})
selectedNav[index].classList.add('add-this-to-selected-section');
}
selectedNav.forEach((item, index)=>{
item.addEventListener('click', ()=> navChange(index))
})
const navSlide = () =>{
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
// Toggle Nav
burger.addEventListener('click',()=>{
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();
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: #245871;
text-decoration: none;
letter-spacing: 3px;
font-weight: 800;
font-size: 18px;
}
.add-this-to-selected-section{
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.burger div{
width: 25px;
height: 3px;
background-color: #245871;
margin: 5px;
transition: all 0.3s ease;
}
.burger{
display: none;
cursor: pointer;
}
#media screen and (max-width: 1024){
.nav-links{
width: 70%;
cursor: pointer;
font-weight: 1200;
}
}
#media screen and (max-width: 997px){
body{
overflow-x: hidden;
}
nav{
color: white;
}
.head-btn{
color: white;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #245871;
color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a{
opacity: 1;
color: white;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
color: white;
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
} to {
opacity: 1;
transform: translateX(0px);
}
}
<div class="logo">
<h4>xxx</h4>
</div>
<ul class="nav-links">
<li class=".home-btn">xxx</li>
<li class=".exchange-btn">xxx</li>
<li class=".debit-btn">xxx</li>
<li class=".crypto-btn">xxx</li>
<li class=".stock-btn">xxx</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>

Nav Bar Problems with Position Fixed

The main objective for me is to make a nav-bar that has a position fixed. I'm not able to introduce it since once I put the element in my .nav{} all the children element squeeze to the top left-hand corner. Right now this is what I have:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5D4954;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}
.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;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3 ease;
}
#media screen and (max-width:1024px) {
.nav-links {
width: 60%;
}
}
/* Commented so as to reproduce the problem visually
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
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.5 ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}*/
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<html>
<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>
Get Started
</li>
<li>
Information
</li>
<li>
Contact Us
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
Add width: 100%; to your nav{} rules

Categories

Resources