We Keep Coding

Text aninamtion is shaking?

I was coding away on my newest project of learning css animation.
I've come a long way but for some reason when I scale my div-boks with a text element inside the text begins to shake when it appears.
What is the solution to this...
Btw I do care about effecienty as I will be rated on that for my project.
If javascipt is a better option and you know how to provide that please do
(best in the form of a tutorial page as I actually want to learn the code :D)
I will later use it to for responsive design so keep that if possible it would be nice to find a solution that cheaks that boks too
Here is the code:
function myFunction() {
var x = document.getElementById("topnav_id");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
document.getElementById("topnav_id").style.top = "0px";
} else {
document.getElementById("topnav_id").style.top = "-300px";
}
}
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Oswald:wght#200;300;400;500;600;700&display=swap');
/* animations */
#media (prefers-reduced-motion: no-preference) {
.fa-down-long {
position:relative;
animation-name: hover-up-down;
animation-duration: 1s;
animation-iteration-count: infinite;
}
}
#keyframes hover-up-down {
0% {left:0px; top:30px;}
25% {left:0px; top:30px;}
50% {left:0px; top:50px;}
100% {left:0px; top:30px;}
}
/* */
#media (prefers-reduced-motion: no-preference) {
.title {
position:relative;
animation-name: opacity-apper;
animation-duration: 10s;
}
}
#keyframes opacity-apper{
0% {opacity: 0%; transform: scale(0.5);}
100% {opacity: 100%; transform: scale(1);}
}
* *:not(.topnav, #topnav){
margin: 0;
}
.background {
height: 100vh;
}
.background_header{
background-color: black;
background-image: url(/assets/placeholders/Front\ page.jpeg);
background-position: center;
}
.background_black{
background-color: black;
}
h1{
font-size: 8vw;
}
h2{
font-size: 3vw;
font-weight: 300;
}
.title {
display: grid;
grid-template-rows: 200px auto ;
font-family: 'Oswald', sans-serif;
color: white;
text-align: center;
padding-top: 30vh;
justify-content: center;
}
/* menubar */
#media screen and (min-width: 600px) {
.flex{
display: flex;
align-items: center;
column-gap: 2rem;
}
}
#topnav_id{
top: -300px;
transition: top 0.3s;
}
/* menubar responsvie */
.logo{
color: black;
width: 300px;
}
#media screen and (min-width:600px) {
.topnav{
position: fixed;
display: flex;
width: 100%;
z-index: 99;
}
}
#media screen and (max-width:600px) {
.topnav{
position: fixed;
display: block;
width: 100%;
z-index: 99;
}
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: rgb(0, 0, 0);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(255, 255, 255);
}
.dropdown-content a:hover {
background-color: rgb(243, 243, 243);
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(.active), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta1</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class=" background background_header">
<header class="header" id="header">
<div class="topnav" id="topnav_id">
<img class="logo" src="assets/Clean logo shite.svg" alt="Website_Logo">
<div class="flex">
Skills
About
Contact
<div class="dropdown">
<button class="dropbtn">Protfolio
<i class="fa fa-caret-down dropdown_icon"></i>
</button>
<div class="dropdown-content">
Design
School
Public
Social Media
</div>
</div>
☰
</div>
</div>
<div class="title">
<h1>I Make Visions Into Reality</h1>
<h2>Scroll to find More!</h2>
<i class="fa-solid fa-down-long" style="font-size: 5rem; padding-top: 4vh;"></i>
</div>
</div>
<div class="background background_video">
</div>
<div class="background background_white">
</div>
<div class="background background_black">
</div>
<script src="scripts/scroll.js"></script>
<script src="scripts/responsive.js"></script>
<script src="https://kit.fontawesome.com/fd59281c27.js" crossorigin="anonymous"></script>
</body>
</html>
<!-- Colors:
-----------------------------
New Black - #11121a
Orange - #11121a
Blue - #5865F2
Red - #ED4245
-----------------------------
******************************************
Font:
-----------------------------
Title - Oswald
-----------------------
font-family: 'Oswald', sans-serif;
---
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-----------------------------
Fancy - Marck Script
-----------------------
font-family: 'Marck Script', cursive;
---
#import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
-----------------------------
Text - Arial
----------------------- -->
Thanks

Animations that scale or move position can cause "lag" or "stuttering", especially for low/mid end pc's. It's also recommended not to play too many animations at the same time since that can cause stuttering too. I have a portfolio website with a lot of animations which run fine on my personal pc, but can stutter on my work laptop. I'm thinking that's the issue in this case since your animation runs fine for me.
an article that might help:
https://www.keycdn.com/blog/animation-performance

Opening and Closing dropdown menu when clicking outside

For my website I want to make my features button open a list of content and closing it when clicking outside of the button. However if I try to apply my code (which I thought to be correct) my dropdown list disappears for any reason. Does anyone know how to stop my dropdown list from disappearing? My code is the following:
// Rotation arrow icon on click
const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}
// Opening dropdown menu on click
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(Event) {
if (!Event.target.matches('.dropbtn')) {
const dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* General styling attributes */
* {
margin:0;
padding:0;
border:0;
outline:0;
text-decoration:none;
list-style:none;
box-sizing: border-box;
}
:root {
--color-primary: #4EC843;
--color-secondary: #387CFF;
--color-dashboard: purple;
--color-hover: #20d62c;
--color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
--container-width-lg: 80%;
--container-width-md: 90%;
--container-width-sm: 94%;
--dashboard-width: clamp(210px, 22vw, 325px);
--transition: all 400ms ease;
--tranition-button: all 800ms ease;
}
body * {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
.container {
width: var(--container-width-lg);
margin: 0 auto;
}
h1, h2, h3, h4 h5{
line-height:inherit;
}
h1 {
font-size:3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size:2.063rem;
}
h4 {
font-size:1.125rem;
}
h5 {
font-size:0.938rem;
}
hr {
display: flex;
opacity: 15%;
width: 3.125rem;
text-align: center;
}
img {
width:100%;
height:auto;
}
/* Large screen size website design */
/* Navigation Menu styling Index.html */
nav {
width:100%;
height:4.5rem;
position:fixed;
top:0;
z-index:11;
background: white;
opacity: 98.2%;
}
.nav__container {
height:4.5rem;
display:flex;
justify-content: space-between;
align-items: center;
}
.nav__container li, a {
font-size:0.95rem;
font-weight:600;
color:black;
}
.nav__menu button {
background:none;
}
.Hamburger {
display:none;
}
.nav__menu {
display:flex;
align-items: center;
gap:3.5rem;
}
.nav__menu a:hover {
transition: var(--transition);
color:grey;
}
.Login_nav {
display: block;
}
.Login:hover {
transition: var(--transition);
color:grey;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: var(--color-primary);
border-radius:2.125rem;
border:none;
color: white;
width:8.125rem;
height:2.188rem;
font-weight:600;
font-size:0.938rem;
}
#Demobutton:hover {
background-color: #20D62C;
transition:var(--tranition-button);
}
#startingbackground {
content:'';
position:absolute;
height:100%;
width:100%;
background: var(--color-variant);
}
.dropbtn {
cursor: pointer;
}
.show {
display: flex;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
visibility: hidden;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 11;
border-radius: 0.4rem;
padding: 2rem;
gap:1.5rem;
flex-direction: column;
opacity: 100%;
}
/* Header styling Index.html */
header {
position: relative;
margin-top:4.5rem;
margin-left:3.125rem;
overflow:hidden;
height:49.313rem;
margin-bottom: 5rem;
}
header h1 {
color:white;
}
header p {
color:#CECECE;
font-size: 1rem;
}
.header__container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap:5rem;
height: 25rem;
margin-top:2rem;
}
.header__left {
text-align: center;
}
.header__left p {
margin: 1rem 0rem 2.375rem;
}
#Trialbutton {
background-color: var(--color-primary);
border-radius:0.625rem;
border-style:solid;
border:none;
cursor:pointer;
font-size: 1rem;
color:white;
height:3.175rem;
width:17.563rem;
}
#Requestbutton {
background-color:white;
border-radius:0.625rem;
border-style:solid;
border:none;
cursor:pointer;
font-size: 1rem;
color:#454545;
height:3.175rem;
width:10.563rem;
}
#Trialbutton:hover {
transition:var(--tranition-button);
background-color:#20D62C;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DraftFlex</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Font-families -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;500;600&display=swap" rel="stylesheet">
<!-- Fontawesome Icon -->
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<!-- Iconscout CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<div id="startingbackground">
<!-- Start of Navigation Menu -->
<nav>
<div class="container nav__container">
<img src="/icons/logo.svg" alt="logo">
<div class="nav__menu">
<div class="dropdown">
<button class="dropbtn switch" onclick="myFunction()">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></button>
<div class="dropdown-content" id="myDropdown">
Link1
Link2
Link3
</div>
</div>
Pricing
Contact Us
</div>
<div class="Login_nav">
Login
<form><button id="Demobutton">Get demo</button></form>
</div>
<div class="Hamburger">
<button id="open-menu-btn"><i class="uil uil-bars"></i></button>
<button id="open-menu-btn"><i class="uil uil-multiply"></i></button>
</div>
</div>
</nav>
<!-- End of Navigation Menu -->
<!-- Start of Header -->
<header>
<div class="container header__container">
<div class="header__left">
<h1>The all-in-one draft to <br> deal platform</h1>
<p>Our product enables your team to create, approve, sign and <br> manage your contracts in one workspace</p>
<div class="Trialgroup">
<form><button id="Trialbutton">Start Free 14-day Trial</button></form>
<form><button id="Requestbutton">Request a Demo</button></form>
</div>
</div>
<div class="header_right">
</div>
</div>
</header>
</div>

first of all your dropdown doesn't get the class show after fixing this then your styles in class show will be overwritten by the dropdown styles itself you have to use !important
.show {
display: flex !important;
visibility: visible !important;
}

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>

Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.

Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

Javascript navigation button, data-visible class problem

guys! I have some problems with my script. It's with my navigation button which if you press the tab should be coming up. I don't get any error codes. Could I get some help? It does give me value back in the console "true" or "false". I think the problem is not with the javascript more like with CSS or HTML. Thank you in advance!
const primaryNav = document.querySelector(".nav-items");
const navToggle = document.querySelector(".mobile-nav-toggle");
navToggle.addEventListener("click", () => {
const visibility = primaryNav.getAttribute("data-visible");
if(visibility === "false"){
primaryNav.setAttribute("data-visible", true);
navToggle.setAttribute("aria-expanded", true);
} else if (visibility === "true"){
primaryNav.setAttribute("data-visible", false);
navToggle.setAttribute("aria-expanded" , false);
}
});
html,body{
margin: 0%;
box-sizing: border-box;
background-image: url(../assets/Coding2.jpg);
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
}
/*-------Global Classes ------*/
a{
text-decoration: none;
}
.flex-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul{
list-style-type: none;
}
/* -------navbar-------*/
.nav{
padding: 0 2rem;
height: 0rem;
min-height: 15vh;
overflow: hidden;
}
.nav .nav-brand a{
font-size:2rem;
padding:1rem 1.5rem;
position:relative;
top: 15%;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .nav-items{
list-style-type: none;
display: flex;
margin: 0;
align-items: center;
justify-content: space-between;
}
.nav .nav-menu{
justify-content: space-between;
}
.nav .nav-items .nav-link{
padding: 1rem 1.5rem;
position: relative;
font-size: 1.1rem;
font-family: Arial, "Time New Roman";
color: white;
}
.nav .social{
padding:1.4rem 0;
}
.nav .nav-items a{
text-decoration: none;
color: white;
font-family: Arial, "Time New Roman";
}
.mobile-nav-toggle{
display: none;
}
.nav .nav-items a > [aria-hidden="true"]{
font-weight: 700;
margin-inline-end: 0.75rem;
}
#media (max-width: 35em){
.nav .nav-brand a{
right: 30%;
font-size: 1.5rem;
}
.nav .nav-items{
--gap: 2em;
position: fixed;
z-index: 1000;
inset: 0 0 0 30%;
flex-direction: column;
padding: min(20vh, 10rem) 2em;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
transform: translateX(100%);
}
.nav .nav-times[data-visible="true"]{
transform: translateX(0%);
}
.mobile-nav-toggle{
display: block;
position: absolute;
background: url(../assets/icon-hamburger.svg);
background-repeat: no-repeat;
border: 0;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
font-size: 0;
}
}
/* ---X---navbar---X---*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Science Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<script src="./js/main.js" defer></script>
<button class="mobile-nav-toggle" aria-controls ="nav-items" aria-expanded ="false"><span class="sr-only">Menu</span></button>
<nav class="nav">
<div class="nav-menu flex-row">
<div class="nav-brand">
CBlogging
</div>
<div>
<ul id = "nav-items" data-visible = "false" class="nav-items flex">
<li class ="nav-link">
<span aria-hidden="true">00</span>Home
</li>
<li class ="nav-link">
<span aria-hidden="true">01</span>Contact
</li>
<li class ="nav-link">
<span aria-hidden="true">02</span>Article
</li>
<li class ="nav-link">
<span aria-hidden="true">03</span>Home
</li>
</ul>
</div>
<!---
<div class="social text-gray">
F
I
T
Y
</div>
-->
</div>
</nav>
</body>
</html>

First step is change background-color like:
body {
background-color: #252525;
}
Now in button change font-size to example 17px:
.mobile-nav-toggle {
font-size: 17px;
}
Second and last step is change name of css atribute .nav-times to .nav-items:
.nav .nav-items[data-visible='true'] {
transform: translateX(100%);
}
That's it. Your welcome :)

Menu disappears when device width is smaller

I'm making a menu but I have a problem with my JavaScript.
I messed up the JavaScript file, but it works in general. The thing is that when you load the page and your with is less than 858px and then you click in one of the items of the menu, if then you make your width larger the menu disappears. So I want to not disappear it.
JavaScript, HTML and CSS:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<script src="./main.js"></script>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>

The function "hide()" makes the navigation disappear. For example, you said in the navigation that if you click on the list element, the navigation should disappear. If you remove the "display: none" everything should work as you wanted it to.
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
Try it this way:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
Happy Coding!