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>
Related
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
I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
const 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 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
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: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
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);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms & Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}
Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.
My navigation items are not displaying on large screens, however on mobile devices they are displaying as expected. Can anyone assist me with a solution. I am suspecting that it has to do with the clip-path property, however i have tried to play around with it and haven't had any joy.I want the navigation items to display on large screens as it is displaying on mobile devices.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.navBar {
position: relative;
height: 10vh;
display: flex;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #003300;
}
.navbrand {
padding: .8em 0 0 1em;
/* margin: 2.5em 0;*/
}
.logo {
font-size: 1.4rem;
font-weight: 600;
color: #fff;
}
.navList {
position: absolute;
background: #003300;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
padding-top: 9em;
}
.navList.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.navItem {
text-align: center;
padding-top: 1.2em;
}
.navLink {
font-size: 1rem;
font-weight: 600;
color: #fff;
line-height: 1.6;
}
.navLink:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.navLink:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.navLink:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.navLink:nth-child(4) {
transition: all 0.5s ease 0.6s;
}
.navLink:nth-child(5) {
transition: all 0.5s ease 0.6s;
}
.navLink:nth-child(6) {
transition: all 0.5s ease 0.6s;
}
.navLink.fade {
opacity: 1;
}
.navLink:focus {
color: #ff0000;
opacity: .3;
}
.navLink:hover {
color: #ff0000;
opacity: .6;
}
.socialContact {
display: flex;
margin: 1em auto;
}
.socialLink {
background: #fafafa;
width: 40px;
height: 40px;
margin: 1em 0.625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.socialFB {
font-size: 1.5rem;
color: #4267b2;
padding: 1em;
}
.socialTwitter {
font-size: 1.5rem;
color: #1da1f2;
padding: 1em;
}
.socialInsta {
font-size: 1.5rem;
color: #000;
padding: 1em;
}
.hamburger-btn {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.hamburger-btn_burger {
width: 20px;
height: 3px;
background: #fff;
margin: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn_burger::before,
.hamburger-btn_burger::after {
content: '';
position: absolute;
width: 20px;
height: 3px;
background: #fff;
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn_burger::before {
transform: translateY(-7px);
}
.hamburger-btn_burger::after {
transform: translateY(7px);
}
.hamburger-btn.open .hamburger-btn_burger {
transform: translateX(-50px);
background: transparent;
}
.hamburger-btn.open .hamburger-btn_burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger-btn.open .hamburger-btn_burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
#media screen and (min-width: 768px) {
.navBar {
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.navList {
width: 80%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.navItem {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 2em;
}
.navLink {
font-size: 1rem;
color: #fff;
cursor: pointer;
display: inline-block;
margin: 0 70px 0 0;
text-align: left;
border-bottom-style: none;
padding: 0;
}
.navbrand {
margin-bottom: 1em;
}
.logo {
margin-top: 0;
}
.hamburger-btn {
display: none;
}
.socialContact {
display: none;
}
.logo:focus {
color: #ff0000;
opacity: .1;
}
.logo:hover {
color: #ff0000;
}
}
<nav class="navBar">
<div class="navbrand">
XandY Junior School
</div>
<div class="hamburger-btn">
<div class="hamburger-btn_burger"></div>
</div>
<ul class="navList">
<li class="navItem">
</li>
<li class="navItem">
Our Story
</li>
<li class="navItem">
Sports & Clubs
</li>
<li class="navItem">
Admissions
</li>
<li class="navItem">
Parents
</li>
<li class="navItem">
BOSA
</li>
<li class="navItem">
Contact Us
</li>
<li class="socialContact">
<i class="fab fa-facebook-f socialFB"></i>
<i class="fab fa-twitter socialTwitter"></i>
<i class="fab fa-instagram socialInsta"></i>
</li>
</ul>
</nav>
You are correct clip-path is on of the issues. But background is also an issue as its overlapping the existing content when clip-path is removed
I was able to see your "navlist" items using below css. Commented background, clip-path & Padding
.navList {
position: absolute;
/* background: #003300; */
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
/* clip-path: circle(100px at 90% -10%); */
/* -webkit-clip-path: circle(100px at 90% -10%); */
transition: all 1s ease-out;
pointer-events: none;
/* padding-top: 9em; */
}
Although, I'm not able to see the Navbar in mobile mode also, when I use dev-tools.
it won't display on the large screens as per "bootstrap" for making the nav-bar not displayed with using display:none css class in the large screen.
so i will recommend for you to not use nav-bar from bootstrap and you can easily do it with html - css.
$(document).ready(function(){
$(".hamburger-btn").click(function(){
$(".navList").toggle();
});
});
body{
margin: 0;
padding: 0;
}
.navbrand {
display: block;
background: darkgreen;
padding: 10px;
}
.logo {
padding: 10px;
color: #fff;
text-decoration: none;
}
.hamburger-btn {
position: absolute;
top: -50px;
right: -3px;
background: darkgreen;
width: 150px;
height: 150px;
border-radius: 150px;
}
.hamburger-btn_burger {
width: 30px;
height: 4px;
background: #fff;
display: block;
position: absolute;
bottom: 77px;
right: 60px;
}
.hamburger-btn_burger::before{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
top: -8px;
z-index: 9;
}
.hamburger-btn_burger::after{
position: absolute;
content: "";
width: 30px;
height: 4px;
background: #fff;
bottom: -8px;
z-index: 9;
}
.navList{
display: none;
background: darkgreen;
padding: 15px;
position: absolute;
top: 22px;
width: 100%;
z-index: 1;
}
.navList li{list-style: none;display: block;}
.navList li a{display: block; color: #fff; text-decoration: none; padding: 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navBar">
<div class="navbrand">
XandY Junior School
</div>
<div class="hamburger-btn">
<div class="hamburger-btn_burger"></div>
</div>
<ul class="navList">
<li class="navItem">
About Us
</li>
<li class="navItem">
Our Story
</li>
<li class="navItem">
Sports & Clubs
</li>
<li class="navItem">
Admissions
</li>
<li class="navItem">
Parents
</li>
<li class="navItem">
BOSA
</li>
<li class="navItem">
Contact Us
</li>
<li class="socialContact">
<i class="fab fa-facebook-f socialFB"></i>
<i class="fab fa-twitter socialTwitter"></i>
<i class="fab fa-instagram socialInsta"></i>
</li>
</ul>
</nav>
Can you please look at this code...
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;
}
Hello my Burger Menu does not open when i resize the browser. I tried many different thinks and nothing worked. Also theres a weird second right after you resize the window where the menu opens for a split second
Error : Uncaught TypeError: Cannot read property 'toggle' of undefined at HTMLDivElement.burger.addEventListener
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navul');
burger.addEventListener('click', () => {
nav.classlist.toggle('nav-active');
});
}
navSlide();
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: red;
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
.logo {
color: white;
letter-spacing: 6px;
text-transform: uppercase;
font-size: 20px;
}
.navul {
display: flex;
width: 45%;
color: white;
list-style: none;
justify-content: space-around;
}
.navul a {
text-decoration: none;
color: white;
letter-spacing: 2px;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
color: white;
margin: 5px;
background-color: white;
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navul {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navul li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<section id="01">
<nav class="navigation">
<div class="logo">
<h4>Spieker Manufaktur</h4>
</div>
<ul class="navul">
<li>Home</li>
<li>Über Uns</li>
<li>Produkte</li>
<li>Herstellung</li>
</ul>
<div class="burger">
<div class="line01"></div>
<div class="line02"></div>
<div class="line03"></div>
</div>
</nav>
</section>