Menu burger animation triggered by clicking anywhere on the screen - javascript

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>

Related

How can I make the social links in my mobile menu fit together on one line?

I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>

Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css

Hamburger Navmenu problems

I am creating a website and there seems to be a problem with the hamburger menu.
I have a basic hamburger navbar but I have to hold the hamburger icon to activate the hamburger menu. Still, the nav menu doesn't appear after clicking/holding the hamburger icon!
const hamburger = document.getElementsByClassName('hamburger-menu')[0];
const navLinks = document.getElementsByClassName('navlinks')[0];
hamburger.addEventListener('click', () => {
hamburger.classlist.toggle("open");
navLinks.classlist.toggle("open");
});
#import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Plus Jakarta Sans", sans-serif;
}
body {
background-color: #f2e5d7;
}
a {
text-decoration: none;
}
.navbar {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3a3e59;
box-shadow: 1px 1px 7px 4px grey;
}
.logo {
width: 50%;
display: flex;
align-items: center;
}
.logo img {
border-radius: 50%;
width: 4rem;
}
.nkc {
margin-left: 20px;
font-weight: 600;
letter-spacing: 1.5px;
font-size: 17px;
}
.hamburger-menu {
display: none;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: #f75435;
margin: 2.5px;
}
.navlinks {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
top: 95px;
position: fixed;
right: -100%;
background-color: #3a3e59;
padding: 1rem 3.5rem;
height: 20%;
transition: all 0.3s ease-in-out;
}
.navlinks li a {
color: #f75435;
font-size: 17px;
}
.hamburger-menu.open .bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger-menu.open .bar:nth-child(2) {
opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.navlinks.open {
right: 1rem;
}
#media screen and (max-width: 768px) {
.hamburger-menu {
display: flex;
flex-direction: column;
}
}
<body>
<header class="header">
<nav class="navbar">
<div class="logo">
<img src="assets/logo.jpg" alt="Nikhil Codes">
<h5 class="nkc">Nikhil Codes</h5>
</div>
<ul class="navlinks">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
</ul>
<div class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<script src="scripts.js"></script>
</body>

Just a bunch of syntax errors and issues with your CSS. I've edited them and marked up the changes I've made below.
//added the code to the onload event so you can put the script wherever you like and not be restricted to putting it at the end of your html
window.onload = () => {
const hamburger = document.querySelector('.hamburger-menu'); //Changed this to querySelector so you don't need to get the 1st item
const navLinks = document.querySelector('.navlinks'); //ditto
hamburger.addEventListener('click', () => {
hamburger.classList.toggle("open"); //Was classlist, not classList (note the capital L)
navLinks.classList.toggle("open");
});
}
#import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Plus Jakarta Sans", sans-serif;
}
body {
background-color: #f2e5d7;
}
a {
text-decoration: none;
}
.navbar {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3a3e59;
box-shadow: 1px 1px 7px 4px grey;
color: white;
/* added a colour here so I could see what's going on' */
}
.logo {
width: 50%;
display: flex;
align-items: center;
}
.logo img {
border-radius: 50%;
width: 4rem;
}
.nkc {
margin-left: 20px;
font-weight: 600;
letter-spacing: 1.5px;
font-size: 17px;
}
.hamburger-menu {
/* display: none; */
display: flex;
/*changed this to display flex to stack the bars on top of each other */
flex-direction: column;
/*stack the bars using this */
transition: 0.3s ease-in-out;
cursor: pointer;
}
.bar {
display: inline-block;
/*added this to make the width & height attributes effective */
width: 25px;
height: 3px;
background-color: #f75435;
margin: 2.5px;
}
.navlinks {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
top: 95px;
position: fixed;
right: -100%;
background-color: #3a3e59;
padding: 1rem 3.5rem;
height: fit-content;
/* changed this to fit content as the menu spills out of the bottom at small screen heights */
transition: all 0.3s ease-in-out;
}
.navlinks li a {
color: #f75435;
font-size: 17px;
}
.hamburger-menu.open .bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger-menu.open .bar:nth-child(2) {
opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.navlinks.open {
right: 1rem;
}
#media screen and (max-width: 768px) {
.hamburger-menu {
display: flex;
flex-direction: column;
}
}
<header class="header">
<nav class="navbar">
<div class="logo">
<img src="assets/logo.jpg" alt="Nikhil Codes">
<h5 class="nkc">Nikhil Codes</h5>
</div>
<ul class="navlinks">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
</ul>
<div class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

Stop the Image Scrolling when it reached Nav bar CSS and 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.

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