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 + 0.5}s`;
}
});
// burger animation
burger.classList.toggle("toggle")
});
}
navSlide();
/* global */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
/* navbar */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
}
.logo {
color: rgb(181, 181, 181);
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(181, 181, 181);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 2px;
background-color: rgb(181, 181, 181);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width: 768px){
body {
overflow-x: hidden;
}
.nav-links {
position: 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.5s 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,5px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-5px);
}
/* header */
header {
font-family: 'Poppins', sans-serif;
}
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.text-box h4 {
display: inline-block;
font-size: 30px;
color: #3c4245;
letter-spacing: 5px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
<nav>
<div class="logo">
<h4>Gunnar</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<header>
<div class="containerBox">
<div class="text-box">
<h4>Software Engineer | UX/UI Design</h4>
</div>
<img class="img-responsive" src="./images/header.jpeg" alt="">
</div>
</header>
The issue is the absolute positioning on the .nav-links class inside the media query. Setting the z-index addresses the issue however isn't exactly the best way to approach this problem. Here is a fixed up version:
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 + 0.5}s`;
}
});
// burger animation
burger.classList.toggle("toggle")
});
}
navSlide();
/* global */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
/* navbar */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
}
.logo {
color: rgb(181, 181, 181);
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(181, 181, 181);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 2px;
background-color: rgb(181, 181, 181);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
z-index: 999;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 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, 5px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -5px);
}
/* header */
header {
font-family: 'Poppins', sans-serif;
}
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.text-box h4 {
display: inline-block;
font-size: 30px;
color: #3c4245;
letter-spacing: 5px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
<nav>
<div class="logo">
<h4>Gunnar</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<header>
<div class="containerBox">
<div class="text-box">
<h4>Software Engineer | UX/UI Design</h4>
</div>
<img class="img-responsive" src="https://i.imgur.com/dc1PU8j.jpg" alt="">
</div>
</header>
Related
This code was functional but when i implemented it to a new website it is not working.
I'm trying to create a navbar that has a hamburger button but it won't work and I'm not sure why.
I tried to decode the problem but did not manage.
What could be the cause to this problem?
I am using javascript onclick function.
/* Responsive Hamburger Menu */
const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];
toggledropdown.onclick = () => {
togglemenu.classList.toggle('active'),
togglemenu.classList.toggle('nav-center');
}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');
:root{
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: violet;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
section{
padding: 100px;
padding-bottom: 0px;
}
footer{
background-color: var(--darker);
color: var(--accent);
}
.container{
width: 70%;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* -------- Navigation CSS ------- */
header{
background-color: var(--darker);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
color: white;
padding: 20px;
}
.logo h1{
color: white;
font-size: 2rem;
}
.nav-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-ul ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.nav-ul ul li{
list-style: none;
}
.nav-ul ul li a{
text-decoration: none;
color: white;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.nav-ul ul li a:hover{
}
.icon{
height: 20px;
cursor: pointer;
position: absolute;
top: 1.88rem;
right: 2rem;
}
.icon a img{
height: 100%;
}
.hamburger{
display: none;
position: absolute;
top: 1.46rem;
left: 2rem;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
}
.hamburger .bar{
height: 3px;
width: 100%;
margin: 5px;
background-color: white;
}
.nav-up {
top: -10%;
transition: 2s ease-in;
}
.nav-down{
transition: 0.5s ease-in;
}
#media screen and (max-width:1024px) {
section{
padding: 50px;
}
.hamburger{
display: flex;
}
.navbar{
display: flex;
flex-direction: column;
}
.nav-ul{
display: none;
width: 100%;
transition: 1s ease-in;
}
.nav-ul ul{
flex-direction: column;
}
.nav-ul li{
text-align: center;
}
.nav-ul li a{
padding: .5rem 1rem;
}
.nav-ul .active{
display: flex;
flex-direction: column;
}
.nav-ul li{
animation-name: animateIn;
animation-duration: 350ms;
animation-delay: calc(var(--animation-order) * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
margin-top: 16px;
font-size: 1rem;
}
#keyframes animateIn {
0% {
opacity: 0;
transform: scale(0.6) translateY(-8px);
}
100% {
opacity: 1;
}
}
}
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">LOGO</h1>
</div>
<div class="nav-ul nav-center">
<ul>
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>
You had a space between .nav-ul and .active
/* Responsive Hamburger Menu */
const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];
toggledropdown.onclick = () => {
togglemenu.classList.toggle('active'),
togglemenu.classList.toggle('nav-center');
}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');
:root{
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: violet;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
section{
padding: 100px;
padding-bottom: 0px;
}
footer{
background-color: var(--darker);
color: var(--accent);
}
.container{
width: 70%;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* -------- Navigation CSS ------- */
header{
background-color: var(--darker);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
color: white;
padding: 20px;
}
.logo h1{
color: white;
font-size: 2rem;
}
.nav-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-ul ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.nav-ul ul li{
list-style: none;
}
.nav-ul ul li a{
text-decoration: none;
color: white;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.nav-ul ul li a:hover{
}
.icon{
height: 20px;
cursor: pointer;
position: absolute;
top: 1.88rem;
right: 2rem;
}
.icon a img{
height: 100%;
}
.hamburger{
display: none;
position: absolute;
top: 1.46rem;
left: 2rem;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
}
.hamburger .bar{
height: 3px;
width: 100%;
margin: 5px;
background-color: white;
}
.nav-up {
top: -10%;
transition: 2s ease-in;
}
.nav-down{
transition: 0.5s ease-in;
}
#media screen and (max-width:1024px) {
section{
padding: 50px;
}
.hamburger{
display: flex;
}
.navbar{
display: flex;
flex-direction: column;
}
.nav-ul{
display: none;
width: 100%;
transition: 1s ease-in;
}
.nav-ul ul{
flex-direction: column;
}
.nav-ul li{
text-align: center;
}
.nav-ul li a{
padding: .5rem 1rem;
}
.nav-ul.active{
display: flex;
flex-direction: column;
}
.nav-ul li{
animation-name: animateIn;
animation-duration: 350ms;
animation-delay: calc(var(--animation-order) * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
margin-top: 16px;
font-size: 1rem;
}
#keyframes animateIn {
0% {
opacity: 0;
transform: scale(0.6) translateY(-8px);
}
100% {
opacity: 1;
}
}
}
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">LOGO</h1>
</div>
<div class="nav-ul nav-center">
<ul>
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>
I cannot get my ease-in transition to work on the navigation bar.
On Mobile when you click the burger, I would like a simple transition sliding in from right to left.
I tried using translateX (0%, 100%) instead of display (none, flex).
I feel like i am missing/forgetting something really simple.
What am I doing wrong / forgetting?
Github Repo_branch
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 850px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.5s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>
First, transition has no effect on changing display properties.
It's a good idea to use the transform parameter for example below:
Then a slide-down effect can be achieved.
Demo:
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 3000px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: flex;
transform: translate3d(0, -100%, 0);
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.3s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
transform: translate3d(0, 0, 0);
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>
This question may seem similar to other questions but my hamburger menu uses checkbox to function and shows up at 768px width and below and I've been running into issues trying to close the open hamburger menu when the window/document is clicked.
I successfully got it to work using several ways but it still doesn't work as intended. The hamburger menu closes on document click alright, but the hamburger menu no longer closes on hamburger menu click as it originally should.
I have very little knowledge of Javascript/Jquery but I understand the bits I used to make other parts of the code work, but I just can't figure out how to make this particular one work.
Below is the code required to recreate the problem:
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
$('.menu-btn').click();
}
});
});
//With vanilla JS
/* window.onclick = function(event) {
if (document.getElementById('menu-btn').checked) {
document.getElementById('menu-btn').click();
}
} */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
Here is also a fiddle of the code.
Your issue is in this line:
$('.menu-btn').click();
It's enough you changed it to this:
e.preventDefault();
$('.menu-btn').click();
With the first line you prevent the default action while with the second you initiated the click event for the correct element.
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
e.preventDefault();
$('.menu-btn').click();
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
I am trying to create a custom WordPress theme. In which I’m trying to create a responsive header but I’m somehow unable to run the script that I’ve written in my scripts.js . I guess there is something that I am doing wrong while linking it to the theme because the script runs perfectly fine outside WordPress. This is my code:
header.php–---
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
css--
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
padding-top: 30px;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5D4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5D4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
nav {
padding-top: 50px;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5D4954;
font-family: "Poppins", sans-serif;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
scripts.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 = <code>navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s</code>;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
functions.php----
<?php
function get_files()
{
wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
wp_enqueue_script('main-scripts', get_template_directory_uri().'/scripts.js', array(),'1.0' , true);
wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());
}
add_action('wp_enqueue_scripts','get_files');
Try the following:
wp_enqueue_script( 'main-scripts', get_stylesheet_directory_uri() . '/scripts.js', array(), '1.0', true );
Also at the moment you've declared your navSlide function but as far as I can see you haven't called it.
I am trying to create a navigation bar that is translated 100% over to the right until the user clicks on the burger and moves it back into its normal position. I am running into issues when I try to disable x-overflow. Users can scroll over to the right and see the grey background so my total view width is 200%. Will provide my code.
style.css
#import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #646464;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #646464d5;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 1.5rem;
}
.nav-links {
display: flex;
width: 30%;
justify-content: space-around;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
section main {
height: 92vh;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
}
section main::after {
content: "";
background: url("../business.jpg");
background-size: cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
section main h1 {
font-size: 2rem;
margin: 2rem;
}
section main a {
padding: 1rem;
border: none;
background-color: blue;
color: white;
margin: 3rem;
font-size: 1rem;
border-radius: 15px;
text-decoration: none;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 80vh;
top: 8vh;
background-color: #646464d5;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
transform: translateX(100%);
transition: transform 0.5s ease-in;
visibility: hidden;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 2rem;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0);
visibility: visible;
}
#powerful{
animation-name: powerful;
animation-duration: 3s;
}
#keyframes powerful{
0%{
color: white;
transform: rotate(45deg);
}
50%{
color: rgb(247, 111, 111);
transform: rotate(15deg) scale(1.2);
}
100%{
color: white;
transform: rotate(0deg);
}
}
#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);
}
Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<title>Home - Marco Chavez</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Marco Chavez</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
<a href="./assets/ResumeMChavez2020-03.pdf" download>Resume</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section>
<main>
<h1>I build
<div id="powerful">
<span>Powerful</span>
</div>
web applications</h1>
Schedule a meeting
</main>
</section>
<script src="./js/script.js"></script>
</body>
</html>
JavaScript
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 + .4}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
}
}