im working on a website for school.
The problem is: My hamburger menu is not opening (btw it only shows up on small screens).
Does anyone know why?
Im using HTML5 (CSS3&Javascript)
Thank you in advance.
HTML code (for the menu)
<body>
<nav>
<header>
<div class="logo">
<h4>Daan</h4>
</div>
</header>
<ul class="nav-links">
<li>
Home
</li>
<li>
5 grootste steden
</li>
<li>
Over mij
</li>
<li>
Opmaak
</li>
<li>
Jquery
</li>
<li>
Canvas
</li>
<li>
GIMP
</li>
<li>
Schoolexamen
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
CSS3 code (to transform the menu to a hamburger one on small screens)
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #2E4053;
font-family: 'Poppins', sans-serif;
}
.logo{
color: slategrey;
letter-spacing: 5px;
font-size: 20px;
font-family: 'Cookie';
}
.nav-links{
display: flex !important;
justify-content: space-around;
width: 80%;
padding:30px;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(247, 245, 248);
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;
}
#media screen and (max-width:1000px){
body{
overflow: hidden;
}
.nav-links{
position: absolute;
right: 0rem;
height: 100%;
top: .75rem;
background-color: #2E4053;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 1;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.toggle .line1{
transform: rotate(-45deg) translate(0px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-14px);
}
JS code
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');
burger.classList.toggle('toggle');
});
}
navSlide();
Steps to debug:
Have you linked you JavaScript file?
< script src="yourFileName.js"></ script>
Have you made sure all appropriate areas in JS have a closing (;)? It seems like you had one missing here.
const navLinks = document.querySelectorAll('.nav-links li');
Have you linked to your css?
< link rel="stylesheet" href="#yourFileName.css">
These may be the issues you are facing if you have functionality in your provided link.
Also spaces were added in front of link, script and script closing to have them viewable you can backspace in your editor.
Related
so hello i'm trying to create a navbar and things were going pretty well , but when i was working at the responsivity of the navbar my addeventlistener function doesn't work:
here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Nav</title>
</head>
<body>
<nav class="navbar">
<h4 class="logo">Nav</h4>
<ul class="navlinks">
<li>
<a href="#" >Home</a>
</li>
<li>
<a href="#" >Work</a>
</li>
<li>
<a href="#" >About us</a>
</li>
<li>
<a href="#" >Projects</a>
</li>
</ul>
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</body>
</html>
my css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: black;
font-family: 'Poppins', sans-serif;
}
.logo{
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.navlinks{
display: flex;
justify-content: space-around;
width: 30%;
}
.navlinks a:hover{
background-color: rgb(37, 156, 196);
}
.navlinks li{
list-style: none;
}
.navlinks a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
cursor: pointer;
display: none;
}
.burger div{
width: 25px;
height: 2px;
background-color: white;
margin: 5px;
}
#media screen and (max-width:1024px){
.navlinks{
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navlinks{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navlinks 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);
}
}
and here's my javascript code:
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
navSlide();
i am pretty new at this forum but i heard that it was the most popular one and my code lines were making me mad so yeah and thanks again for answering my post
glad to see you're new here and decided to join!
Without using jQuery, you can use this:
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
document.addEventListener("DOMContentLoaded", function(event) {
navSlide();
});
Put basically, this code will wait until the page loads (so that all elements exist within the DOM which means document.querySelector will work) and then it attaches the event listener. This is best practice to avoid issues with slow rendering browsers and such without relying on the browser to render the script last.
im not much of a coder but this code has worked for many people and I've spent hours trying to find my error. when I click the hamburger menu the slide menu off to the right is supposed to slide into view and fade the buttons in from opacity 0 to opacity 1. none of this happens at all which makes me think I have a js error.
any help would be great.
jsfiddle below
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classlist.toggle('nav-active');
});
}
navSlide();
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Raleway:100,200,400,600,700,900&display=swap');
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
height: 2.5em;
background-color:#7BC58A;
position: sticky;
top: 0;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: .8rem;
text-align: left;
padding-left: 6em;
padding-top: .4em;
}
.logo-image{
width: 50px;
height: 50px;
overflow: hidden;
margin: 0 0em;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
}
.nav-links{
display:flex;
justify-content: space-around;
width:45%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color:#5A5A5A;
font-size:.75em;
text-transform:uppercase;
text-decoration: none;
font-family: 'Raleway', sans-serif;
font-weight:600;
}
.nav-links a:hover{
color:#7BC58A;
}
.nav-links a:active {
color: #D1D1D1;
}
.burger{
display: none;
float:right;
position: relative;
top:0px;
}
.burger div{
width:25px;
height:3px;
background-color:#5a5a5a;
margin: 3px;
border-radius: 40px;
cursor: pointer;
}
#media screen and (max-width:1024px){
.nav-links{
width:55%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height:92vh;
top: 8vh;
background-color: #7BC58A;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translate(100%);
}
.nav-links li{
opacity:1;
}
.burger{
display:block;
}
}
.nav-active{
transform:translatex(100%)
}
#keyframes navLinksFade{
from{
opacity:0;
transform:translateX(50px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="header">
<i class="fa fa-phone"></i> (209)838-1934 <i class="fa fa-envelope"></i> inquiry#allseasonlawn.net
</section>
<!-- NAVIGATION STARTS-->
<nav id="nav">
<a class="navbar-brand" href="/">
<div class="logo-image">
<img src="images/navbar_logo_50x50.png" class="img-fluid">
</div>
</a>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Reviews</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
https://jsfiddle.net/robertrlamb96/3yuzok8r/1/
You had two problems with adding the class. First was you were trying to attach the event listener before the browser has parsed (read) the full html. In other words, the browser didn't know what "burger" or "nav" referred to. To overcome this you need to run the script as part of an onload method. Note, in JSFiddle you have to set the Load type to "no wrap bottom of " to have access to this and I do not believe SO snippets support this feature.
The second error was that "classList" was misspelled (the 'l' is capitalized). I believe you still have some work to do to get it working, but this gets the script running.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classList.toggle('nav-active');
});
}
onload = ()=>{
navSlide();
};
https://jsfiddle.net/6qj0kwmg/
Recently I uploaded my website online on Github and it came out with some display problems.
I have an Hamburguer menu icon (.toggle - in my code) for widths less than 1210px. When I click in the icon it works fine, displaying the submenu with the items, but when I click in the home button the main page loses the menu icon. I don´t know why.
I've tested it previously before it became public, and it was working fine.
The same thing happens when I click on the a-tower or muda items and then backwards to home, again the icon disappears.
I have already tried to research about that error in specific but didn´t find one particularly similar.
html:
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class= "toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
<a href="./index.html" >Home</a>
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
<a href="./Atower.html" >A-Tower</a>
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
<a href="#Contact" >Contact</a>
</li>
</ul>
</div>
css:
.header {
background-color: rgb(235, 223, 201);
z-index: 100;
top: 0px;
margin: 0 auto;
max-height: 5rem;
position: fixed;
border-bottom-style: double;
display: flex;
justify-content: space-between;
width: 100%
}
.menu-one {
display: flex
}
.logo {
display: flex;
}
.logo img {
height: 100%
}
.lettering {
display: flex;
justify-content: center;
align-items: flex-end;
padding-left: 1%;
}
h6 {
margin-bottom: 1.7%;
font-family: 'calibri';
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 0.8em;
}
h6 .bolder {
font-weight: bold;
}
h6 .smaller {
font-weight: lighter;
}
.toggle {
display: none;
}
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
letter-spacing: 1px;
font-size: 20px;
color: black
}
#menu-two{
display: flex;
}
.hide {
display: none;
}
li {
list-style: none;
padding: 1em
}
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle{
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
js:
$(document).ready(() => {
$('.toggle, .item').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
})
Note: when I resize my browser in my desktop, when it gets smaller, between 870px and 560px the menu burguer stays on the right, and disappears during these dimensions periods.
I have checked your site, it's not a jquery issue. The hamburger icons disappear because of the logo property "flex".
Replace this CSS on your stylesheet, I will fix your issue.
.logo {
display: flex;
flex: 1;
}
when your hamburger menu appears, it's got CSS display: block property so it failed to counter the display: flex.
Let me know Please.
A couple things are going on here. First, some of the links are redirecting you to a new page, without the header code. Second, you have your first click event set up to respond to .toggle and .item. .item refers to your menu items, so you want to remove that target.
$(document).ready(() => {
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('visible')
})
$('.active').on('click', function() {
$('.toggle').fadeToggle()
})
$('ul#menu-two > li > a').click(function(e){
e.preventDefault();
});
});
#media only screen and (max-width: 1210px) {
#menu-two {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
#proj {
display: none;
}
#menu-two.visible {
opacity: 0.9;
pointer-events: auto;
}
.hide {
background-color: rgb(245, 243, 229);
opacity: 0.95;
position: absolute;
width: 100%;
top: 4rem;
text-align: center;
}
.options {
display: block;
}
.menu-one {
display: flex;
justify-content: space-between;
width: 100%
}
.toggle {
display: initial;
padding-top: 1.5rem;
transform: translate(-10px);
cursor: pointer;
}
.toggle span {
position: relative;
width: 36px;
height: 4px;
display: block;
background-color: black;
margin-bottom: 8px;
transition: 0.5s;
}
.toggle span:nth-child(1) {
transform-origin: left;
}
.toggle span:nth-child(2) {
transform-origin: center;
}
.toggle span:nth-child(3) {
transform-origin: left;
}
.toggle.active span:nth-child(1) {
transform: rotate(45deg);
left: 2px;
}
.toggle.active span:nth-child(2) {
transform: rotate(315deg);
right: 3px;
}
.toggle.active span:nth-child(3) {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="menu-one">
<div class="logo">
<img src=".\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul id="menu-two" class="hide">
<li class="item">
Home
</li>
<li class="item" id="proj">
Projects
</li>
<li class="options">
A-Tower
</li>
<li class="options">
Muda
</li>
<li class="item">
About
</li>
<li class="item">
Contact
</li>
</ul>
</div>
I have a web page I started and currently just trying to get the nav bar to be responsive, I've got all the media query tags in but when I'm looking at how it looks in different screen sizes on developer tools, sometimes it will look exactly how I want it to and other times it will look wrong.
I haven't changed anything in the code but when I'm going through the different screen options it will just switch between and I'm not sure why so I don't know whether the code is wrong or if it's just developer tools adjusting?
Any help is greatly appreciated.
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 + 3}s`;
}
};
//burger animation
burger.classList.toggle('toggle');
}, )
}
navSlide();
body {
margin: 0;
padding: 0;
height: 100%;
}
/*navigation top bar*/
.nav {
background-color: #2b2929;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: Arial, Helvetica, sans-serif;
}
.logo {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30pc;
}
.nav-links li {
list-style: none;
}
.nav-links :hover {
color: rgb(0, 204, 255);
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
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: 6vh;
background-color: #2b2929;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 100%;
}
.burger {
display: block;
}
.footer {
padding-bottom: 100px;
}
}
#media screen and (min-width:768px) {
body {
overflow-x: hidden;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navlinkfade {
from {
opacity: 0;
transform: translateX(50px)
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sue Allerton</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="nav">
<h1 class="logo">Sue Allerton</h1>
<ul class="nav-links">
<li>Home</li>
<li>About Me</li>
<li>Collections</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section class="container">
<div class="main">
<p>let your imagination run wild</p>
</div>
</section>
<footer class="footer">
<div class="social">
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Goodreads</li>
</ul>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>
I'm looking at how it looks in different screen sizes on developer tools, sometimes it will look exactly how I want it to and other times it will look wrong.
You should mention on which screen size it looks different and what you mean by how exactly you want it to look. Also it seems like link is not defined because you are using forEach on a collection and that is an Array method. You can convert the collection to an array first
const NavLinksArray = Array.prototype.slice.call(NavLinks)
I want to program a responsive navigation bar, so when the user clicks on the burger menu, the links of the navigation should move from right to left inside the website.
In Javascript, I toggle the class "nav-active" of "nav ul". The "nav-active" class has the attribute "transform: translateX(0%);", which should position the element back to the website, but it doesn't.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<!------------------------------------------------------------------------Top Navigation-->
<nav class="navigation">
<div class="logo">
<img src="images/logodressler350.png" alt="Logo Image" width="250">
</div>
<ul class="nav-links">
<li>Startseite</li>
<li>lernraumdressler</li>
<li>Nachhilfe</li>
<li>Anfahrt</li>
<li>Kontakt</li>
</ul>
<div class="burger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</nav>
<div class="green-line"></div>
<script type="text/javascript" src="javascripts/navbar.js"></script>
</body>
</html>
SCSS:
.navigation{
display: flex;
min-height: 8vh;
justify-content: space-around;
align-items: center;
background-color: white;
ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 70%;
}
ul li{
list-style: none;
text-align: center;
}
ul li a{
text-decoration: none;
color: #333;
letter-spacing: 2px;
font-weight: bold;
font-size: 18px;
}
}
.dropdowncontent{
display: none;
}
.burger{
display: none;
cursor: pointer;
div{
width: 25px;
height: 3px;
background-color: #333;
margin: 5px;
transition: all 0.3s ease;
}
}
.green-line{
background-color: lightgreen;
width: 100%;
height: 2px;
}
//------------------------------------------------------------------------------MEDIA
#media screen and (max-width: 968px){
.navigation{
ul{
width: 80%;
}
}
}
#media screen and (max-width: 868px){
body{
//overflow-x: hidden;
}
.burger{
display: block;
}
.navigation ul{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: gray;
display: flex;
flex-direction: column; // x und y werden getauscht
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
li{
opacity: 0;
}
}
}
//------------------------------------------------------------------------------Keyframes
/*wenn man clickt*/
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line-1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line-2{
opacity: 0;
}
.toggle .line-3{
transform: rotate(45deg) translate(-5px, -6px);
}
JS:
const navSlide = () => {
const burger = document.querySelector(".burger");
var nav = document.querySelector(".navigation ul");
const navLinks = document.querySelectorAll(".navigation ul 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}s`;
}
});
// Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
Here is the Demo
https://jsfiddle.net/chinamarc/6r78a0e2/4/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
//-----------------------------------------------Keyframes
/*wenn man clickt*/
.navigation .nav-active{
transform: translateX(0%);
}