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>
Related
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>
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");
});
}
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.
Want to add an opacity transition when toggling the menu open/closed. It works when the menu opens, but not when the menu closes. Why is this happening?
// Selectors
let header = document.querySelector('.header')
let hamburgerMenu = document.querySelector('.hamburger-menu')
hamburgerMenu.addEventListener('click', function() {
header.classList.toggle('menu-open');
})
/* Basic reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Custom properties */
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/* Global styles */
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/* Reusable styles */
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*
.header
.container
.nav
.logo
img
.hamburger-menu
i
.nav-list
.nav-item
.nav-link
*/
/* Header styles */
.header {
background-color: var(--purple-transparent);
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
/* Header styles - nav */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .nav-list {
opacity: 100%;
transform: scale(1);
transition: opacity .5s;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
background-color: var(--purple-solid);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
/*
.header
.container
.nav
.logo
img
.hamburger-menu
i
.nav-list
.nav-item
.nav-link
*/
.nav-item:not(last-child) {
margin-bottom: 4rem;
}
.nav-link {
display: block; /* allows us to use margin & paddings - by default they're inline elements and so no margin / padding */
color: #fff;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
padding: 1rem;
}
<header class="header">
<div class="container">
<nav class="nav">
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
</div>
</header>
Probably not the answer you wanted, but I hope it helps.
By removing the transform: scale(1); (and transform: scale(0);) the transition works smooth both ways. Was that transformation really needed?
Try with:
.menu-open .nav-list {
opacity: 100%;
transition: all .5s ease-in-out;
visibility: visible;
}
.nav-list {
background-color: var(--purple-solid);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1400;
opacity: 0;
transition: all .5s ease-in-out;
visibility: hidden;
}
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