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;
}
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");
});
}
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...
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>
I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all.
The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.
picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png
picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png
Link of the website http://maderines.000webhostapp.com/
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: fixed;
background-color: rgba(0, 0, 0, 0.692);
top: 12%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 12%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 14%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 14vh;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
top: 97%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 97%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 97%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 97%;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
</div>