I have a problem with my (burger) button.
When I click It's adding a class to my header-links, but class is not working -> I need to change on click from transform: translateX(100%) to transform: translateX(0);
I don't know why it's not working. Please help me, I tried a lot of ways to fix it but still, it's not working.
My code so far:
<header>
<div class="header-logo">
<p>ecodex</p>
</div>
<ul class="header-links">
<li>O NAS</li>
<li>OFERTA</li>
<li>KONTAKT</li>
</ul>
<div class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</div>
</header>
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
p {
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase;
}
.header-active {
transform: translateX(0);
}
.header-links {
display: flex;
justify-content: space-around;
width: 30%;
list-style-type: none;
li {
font-size: 14px;
letter-spacing: 3px;
#media only screen and (max-width: 768px) {
opacity: 0;
}
}
#media only screen and (max-width: 1024px) {
width: 60%;
}
#media only screen and (max-width: 768px) {
position: absolute;
right: 0;
height: 90vh;
top: 8vh;
background: black;
display: flex;
flex-direction: column;
align-items: center;
color: white;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
.header-active {
transform: translateX(0);
}
}
}
.menu {
cursor: pointer;
display: none;
#media only screen and (max-width: 768px) {
display: block;
}
div {
width: 25px;
height: 2px;
background-color: black;
margin: 5px;
}
}
}
const headerSlide = () => {
const menu = document.querySelector('.menu');
const headerLinks = document.querySelector('.header-links');
menu.addEventListener('click', () => {
headerLinks.classList.toggle('header-active');
});
}
headerSlide();
In the developer tools when I click the button the class 'header-active' is adding and removing - it's good, but don't know why my transform: translate(0) is not working.
This should do the trick:
.header-active {
transform: translateX(0) !important;
}
The problem is that .header-links has translateX(100%), so translateX is ignored. I would move transform: translateX (100%) to another class and remove it before adding .header-links.
CSS
.tX100 {
transform: translateX(100%);
}
HTML
<ul class="header-links tX100">
JS
headerLinks.classList.toggle('tx100');
headerLinks.classList.toggle('header-active');
Related
my Friends I have a problem.i have a project that has 3 buttons in it's header .these buttons change width of main div to my specific width has set in my Java script.i want something like media queries for example change my div color or hide or show something when div width changes. i know I can use Java script to define background color for every width but imagine that i have navbar that has sandwich menu button on mobile.this button can easily hide in an specific width that i have defined on my media queries;but what about hiding this button when my main div width decreases to mobile view width instead of changing browser width?
please excuse me for this long text.
<body>
<header>
<span role="button" class="header-collapse"
><i class="fas fa-angle-up"></i
></span>
<ul class="screens">
<li>
<i class="fas fa-mobile-alt"></i>
</li>
<li>
<i class="fas fa-tablet-alt"></i>
</li>
<li>
<i class="fas fa-desktop"></i>
</li>
</ul>
</header>
<main class="content">
</main>
<footer>
<span>Coded by Mahdi Baghaei</span>
</footer>
<script src="./js/app.js"></script>
</body>
*,
html {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: "poppins", sans-serif;
}
header {
min-height: 5vh;
position: relative;
background-color: #e4e1fc;
width: 15%;
margin: 0 auto;
transition: all 0.2s ease;
}
.header-collapse {
position: absolute;
display: block;
left: 50%;
transform: translateX(-50%);
top: 100%;
background-color: #e4e1fc;
width: 2rem;
height: 1rem;
display: flex;
justify-content: center;
align-items: center;
color: #2512cc;
cursor: pointer;
transition: background-color 0.3s ease, color 0.2s ease;
}
.header-collapse:hover {
background-color: #a49af6;
color: white;
}
.header-set {
transform: translateY(-100%);
}
.header-collapse-set {
transform: translateX(-50%) rotateZ(-180deg);
}
.screens {
width: 100%;
margin: 0 auto;
display: flex;
list-style: none;
justify-content: space-around;
height: 100%;
align-items: center;
padding: 1rem;
}
.screens li a {
width: 2rem;
height: 2rem;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.2s ease;
color: #2512cc;
align-items: center;
}
.screens li a:hover {
background-color: #a49af6;
color: white;
}
.screens li a i {
font-size: 1rem;
}
.content {
width: 100%;
height: 75vh;
transition: all 0.4s ease;
margin: auto;
border: 1px solid white;
}
.content-mobile {
width: 768px;
}
.content-tablet {
width: 1200px;
}
footer {
margin-top: auto;
background-color: #e4e1fc;
min-height: 5vh;
padding: 1rem;
text-align: center;
}
footer span {
font-size: 0.9rem;
}
#media screen and (max-width: 768px) {
.content {
background-color: red;
}
}
#media screen and (min-width: 768px) {
.content {
background-color: green;
}
}
#media screen and (min-width: 1200px) {
.content {
background-color: blue;
}
}
const header = document.querySelector("header");
const headerCollapse = document.querySelector(".header-collapse");
const content = document.querySelector(".content");
const screenSwitch = document.querySelectorAll(".screens li");
headerCollapse.addEventListener("click", headerCollapseF);
function headerCollapseF() {
header.classList.toggle("header-set");
headerCollapse.classList.toggle("header-collapse-set");
}
screenSwitch[0].addEventListener("click", mobileView);
screenSwitch[1].addEventListener("click", tabletView);
screenSwitch[2].addEventListener("click", standardView);
function mobileView() {
content.style.width = "768px";
content.style.border = "1px solid black";
}
function tabletView() {
content.style.width = "1200px";
content.style.border = "1px solid black";
}
function standardView() {
content.style.width = "100%";
content.style.border = "1px solid white";
}
I have solved my problem by using iframe html tag
thanks you all.
I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
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.5}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(0%);
}
}
#keyframes navLinkFade {
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>
Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.
This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}
I'm fairly new to JS so I'm sorry if this has been answered.
I've siphoned through most answers and they didn't specifically fall in line with mine.
I'm not understanding why the element cant is called upon when it's there.
I don't think it seems to be anything with the CSS but I'm not completely sure.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
display: flex;
justify-content:space-around;
align-items: center;
min-height: 8vh;
background-color: var(--mainBg);
}
.nav-links li{
list-style: none;
}
.nav-links{
display: flex;
justify-content: space-evenly;
width: 20%;
font-size: 20px;
}
.nav-links a{
letter-spacing: 2px;
color:var(--mainText);
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: var(--mainText);
margin:3px;
padding: 0;
}
.showacase-hero{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("img/D1.jpg");
height: 600px;
background-position:center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-container{
text-align: center;
position: absolute;
top: 50%;
left: 28%;
color: var(--mainBanner);
font-size: 20px;
}
/* Media Queries*/
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:728px){
body{
overflow-x: hidden;
}
.nav-links{
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color:var(--mainBg);
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;
margin-left: 28em;
}
.nav-active{
transform: translateX(0%);
}
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
#media screen and(max-width:566px){
}
<body>
<nav>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="showacase-hero">
<div class="hero-container">
<h1>Yade's Pet</h1>
<span class="banner"><p>Petcare Specialist/Dog Walker</p></span>
<form action="https://www.w3docs.com/">
<button class="btn" type="submit">Let's Take a Stroll</button>
</form>
</div>
</div>
<script type="text/javascript" src="app2.js"></script>
</body>
</html>
nav-links is a class, not a tag, so add a dot before the class name:
document.querySelector( '.nav-links' );
PS: It's a bad practice to use variables const navSlide = () => { instead of a clear function declarations:
function navSlide () {
...
}
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 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%);
}