Footer has a white space to the right - javascript

Basically, as you will see, when i preview the device in mobile S, the footer does not fill the entire browser width unlike the nav bar. This problem is happening from mobile S size to laptop L size!
The code in jsFiddle is more complete!
https://imgur.com/l131R3E
How can i get rid of this white space?
Code: https://jsfiddle.net/84td5z1x/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//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();
/*Ignore this*/
div.whiteSpace {
width: 100%;
height: 1000px;
}
/*Mobile navBar Burger*/
.burger {
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div {
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
/*Background Menu*/
nav.menu {
width: 100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu {
position: fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img {
width: 180px;
float: left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li {
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i {
font-size: 16px;
}
nav ul.ulSecções li a.loja {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/*Footer*/
body footer div.footer {
width: 100%;
height: 170px;
background-color: rgb(24, 24, 24);
}
footer div.icons {
width: 100%;
height: auto;
margin: auto;
padding: 20px 0px;
}
body footer div.icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 10px 10px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 28px;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
#media screen and (max-width: 980px) {
nav.menu {
width: 100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 40vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 40px;
letter-spacing: 0em;
opacity: 0.9;
padding: 0px 10px;
}
nav ul.ulSecções li a.loja {
font-size: 35px;
}
nav ul.ulSecções li a i {
font-size: 35px;
}
div.burger {
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div {
width: 40px;
height: 5px;
margin: 4px;
}
/*Footer*/
body footer div.footer {
width: 100%;
/*Erro aqui!!*/
height: 250px;
background-color: rgb(24, 24, 24);
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 15px 30px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 50px;
}
}
.navActive {
transform: translateX(0%)
}
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
</li>
<li>Cursos
</li>
</li>
<li>Conteúdos Especiais
</li>
<li>Recursos
</li>
<li> Contatos </li>
<li> </i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="whiteSpace"></div>
<!--Footer-->
<footer>
<div class="footer">
<div class="icons">
<ul>
<li> <i class="fa fa-instagram" aria-hidden="true"></i> </li>
<li> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li>
<li> <i class="fa fa-youtube-play" aria-hidden="true"> </i> </li>
</ul>
</div>
</div>
</footer>


Add body {margin: 0;} to reset default margin.


At the top of your CSS, add.
*{
margin: 0;
}
This should remove the pre-existing margin, that is present by default on browsers.
I always start my css with
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Know more about the CSS universal selector (*)


The body is set to margin 8px, set it to 0. The above answer is correct.
https://imgur.com/a/Vy2i5YR

Related

Collapsible navbar doesn't minimize after refresh

I have the following issue with the following code. I have tried to implement a collapsible sidebar menu in my development. I have researched many resources online and I tried to customize it for for myself after following along a Youtube tutorial. However, the collapsing functionally seems to work except at the the time of refreshing the page. I have researched other Stackoverflow solutions (i.e session storage) but I couldn't be able to implement it in my case. Can somebody please help?
Here is my HTML page
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
})
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
sidebarBtn.addEventListener("click" , ()=>{
sidebar.classList.toggle("close");
});
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* fonts */
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght#400;700&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-50: #e0fcff;
--primary-100: #bef8fd;
--primary-200: #87eaf2;
--primary-300: #54d1db;
--primary-400: #38bec9;
--primary-500: #2cb1bc;
--primary-600: #14919b;
--primary-700: #0e7c86;
--primary-800: #0a6c74;
--primary-900: #044e54;
/* grey */
--grey-50: #f0f4f8;
--grey-100: #d9e2ec;
--grey-200: #bcccdc;
--grey-300: #9fb3c8;
--grey-400: #829ab1;
--grey-500: #627d98;
--grey-600: #486581;
--grey-700: #334e68;
--grey-800: #243b53;
--grey-900: #102a43;
/* rest of the colors */
--black: #222;
--white: #fff;
--blue: #2336e2;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto Condensed', Sans-Serif;
--bodyFont: 'Cabin', Sans-Serif;
--small-text: 0.875rem;
--extra-small-text: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 500px;
--fluid-width: 90vw;
--breakpoint-lg: 992px;
--nav-height: 6rem;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--small-text);
}
a {
text-decoration: none;
letter-spacing: var(--letterSpacing);
}
a,
button {
line-height: 1.15;
}
button:disabled {
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
background: var(--white);
height: 100%;
width: 260px;
z-index: 100;
transition: var(--transition);
}
.sidebar.close {
width: 78px;
}
.logo-details {
width: 100px;
height: 60px;
display: flex;
align-items: center;
}
.logo-details span:first-child {
font-size: 30px;
/* color: #94EB58; */
color: var(--primary-600);
height: 50px;
min-width: 78px;
text-align: left;
line-height: 50px;
}
.logo_name img {
width: 140px;
height: 100px;
margin-top: 8px;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.nav-links {
height: 100%;
padding-top: 30px 0 150px 0;
overflow: auto;
}
.nav-links {
overflow: visible;
}
.nav-links::-webkit-scrollbar{
display: none;
}
.nav-links li {
position: relative;
transition: var(--transition);
}
.nav-links li:hover {
background: var(--green-light);
}
.nav-links li span {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--primary-500);
font-size: 23px;
cursor: pointer;
transition: var(--transition);
}
.nav-links li.showMenu span.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links span.arrow {
display: none;
}
.link_name {
font-size: 18px;
font-weight: 400;
color: var(--grey-700);
transition: var(--transition);
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.nav-links li a {
display: flex;
align-items: center;
}
.icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: var(--green-light);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: var(--primary-900);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green-light);
padding: 12px 0;
transition: var(--transition);
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: var(--white);
transition: var(--transition);
}
.sidebar.close .profile-details img{
padding: 10px;
}
.profile_name, .job {
color: var(--grey-700);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.job {
font-size: 12px;
}
.home-section {
position: relative;
background: var(--backgroundColor);
height: 100vh;
left: 260px;
width: calc(100%-260px);
transition: var(--transition);
}
.sidebar.close ~ .home-section {
left: 78px;
width: calc(100% -78px);
}
.home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-content span:first-child,
.text {
color: var(--grey-700);
font-size: 35px;
}
.home-content span:first-child {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
<!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">
<link rel="stylesheet" href="admindashcss.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<title>Admin Dashboard</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="material-icons-sharp">radio_button_checked</span>
<span class="logo_name"><img src="images/logowhite.svg" alt=""></span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="material-icons-sharp">grid_view</span>
<span class="link_name">Dashboard</span>
</a>
<!-- <ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul> -->
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">contact_page</span>
<span class="link_name">Contacts</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>Customer</li>
<li>Resources</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">task</span>
<span class="link_name">Projects</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Projects</a></li>
<li>Project details</li>
<li>Job</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">payments</span>
<span class="link_name">Invoices</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Invoices</a></li>
<li>Recivables</li>
<li>Paybles</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">query_stats</span>
<span class="link_name">Queries</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Recivables</li>
<li>Payables</li>
<li>Gross Profit</li>
<li>Gross Profit Summary</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">admin_panel_settings</span>
<span class="link_name">Admin</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Settings</li>
<li>Users</li>
<li>Documents</li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="images/messi.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Brook Beyene</div>
<div class="job">Project Manager</div>
</div>
<span class="material-icons-sharp">logout</span>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="material-icons-sharp bx-menu">menu</span>
<span class="text">Drop Down Sidebar</span>
</div>
</section>
</body>
</html>
:

All you nedd is to add close to class list in following line:
<div class="sidebar close">
Also if you need to keep last state of navbar, you can stor it in local storage and append it by js on load.
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement;
arrowParent.classList.toggle("showMenu");
})
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
sidebarBtn.addEventListener("click" , ()=>{
sidebar.classList.toggle("close");
});
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* fonts */
#import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght#400;700&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-50: #e0fcff;
--primary-100: #bef8fd;
--primary-200: #87eaf2;
--primary-300: #54d1db;
--primary-400: #38bec9;
--primary-500: #2cb1bc;
--primary-600: #14919b;
--primary-700: #0e7c86;
--primary-800: #0a6c74;
--primary-900: #044e54;
/* grey */
--grey-50: #f0f4f8;
--grey-100: #d9e2ec;
--grey-200: #bcccdc;
--grey-300: #9fb3c8;
--grey-400: #829ab1;
--grey-500: #627d98;
--grey-600: #486581;
--grey-700: #334e68;
--grey-800: #243b53;
--grey-900: #102a43;
/* rest of the colors */
--black: #222;
--white: #fff;
--blue: #2336e2;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto Condensed', Sans-Serif;
--bodyFont: 'Cabin', Sans-Serif;
--small-text: 0.875rem;
--extra-small-text: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 500px;
--fluid-width: 90vw;
--breakpoint-lg: 992px;
--nav-height: 6rem;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--small-text);
}
a {
text-decoration: none;
letter-spacing: var(--letterSpacing);
}
a,
button {
line-height: 1.15;
}
button:disabled {
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
background: var(--white);
height: 100%;
width: 260px;
z-index: 100;
transition: var(--transition);
}
.sidebar.close {
width: 78px;
}
.logo-details {
width: 100px;
height: 60px;
display: flex;
align-items: center;
}
.logo-details span:first-child {
font-size: 30px;
/* color: #94EB58; */
color: var(--primary-600);
height: 50px;
min-width: 78px;
text-align: left;
line-height: 50px;
}
.logo_name img {
width: 140px;
height: 100px;
margin-top: 8px;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.nav-links {
height: 100%;
padding-top: 30px 0 150px 0;
overflow: auto;
}
.nav-links {
overflow: visible;
}
.nav-links::-webkit-scrollbar{
display: none;
}
.nav-links li {
position: relative;
transition: var(--transition);
}
.nav-links li:hover {
background: var(--green-light);
}
.nav-links li span {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: var(--primary-500);
font-size: 23px;
cursor: pointer;
transition: var(--transition);
}
.nav-links li.showMenu span.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links span.arrow {
display: none;
}
.link_name {
font-size: 18px;
font-weight: 400;
color: var(--grey-700);
transition: var(--transition);
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
}
.nav-links li a {
display: flex;
align-items: center;
}
.icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
background: var(--green-light);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: var(--primary-900);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: var(--transition);
}
.sidebar .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu.link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--green-light);
padding: 12px 0;
transition: var(--transition);
}
.sidebar.close .profile-details{
background: none;
}
.sidebar.close .profile-details{
width: 78px;
}
.profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 52px;
width: 52px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
background: var(--white);
transition: var(--transition);
}
.sidebar.close .profile-details img{
padding: 10px;
}
.profile_name, .job {
color: var(--grey-700);
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
display: none;
}
.job {
font-size: 12px;
}
.home-section {
position: relative;
background: var(--backgroundColor);
height: 100vh;
left: 260px;
width: calc(100%-260px);
transition: var(--transition);
}
.sidebar.close ~ .home-section {
left: 78px;
width: calc(100% -78px);
}
.home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-content span:first-child,
.text {
color: var(--grey-700);
font-size: 35px;
}
.home-content span:first-child {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text{
font-size: 26px;
font-weight: 600;
}
#media (max-width: 400px) {
.sidebar.close .nav-links li .sub-menu{
display: none;
}
.sidebar{
width: 78px;
}
.sidebar.close{
width: 0;
}
.home-section{
left: 78px;
width: calc(100% - 78px);
z-index: 100;
}
.sidebar.close ~ .home-section{
width: 100%;
left: 0;
}
}
<!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">
<link rel="stylesheet" href="admindashcss.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<title>Admin Dashboard</title>
</head>
<body>
<div class="sidebar close">
<div class="logo-details">
<span class="material-icons-sharp">radio_button_checked</span>
<span class="logo_name"><img src="images/logowhite.svg" alt=""></span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="material-icons-sharp">grid_view</span>
<span class="link_name">Dashboard</span>
</a>
<!-- <ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul> -->
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">contact_page</span>
<span class="link_name">Contacts</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>Customer</li>
<li>Resources</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">task</span>
<span class="link_name">Projects</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Projects</a></li>
<li>Project details</li>
<li>Job</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">payments</span>
<span class="link_name">Invoices</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Invoices</a></li>
<li>Recivables</li>
<li>Paybles</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">query_stats</span>
<span class="link_name">Queries</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Recivables</li>
<li>Payables</li>
<li>Gross Profit</li>
<li>Gross Profit Summary</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<span class="material-icons-sharp">admin_panel_settings</span>
<span class="link_name">Admin</span>
</a>
<span class="material-icons-sharp arrow">expand_more</span>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Categories</a></li>
<li>Settings</li>
<li>Users</li>
<li>Documents</li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="images/messi.jpg" alt="profile">
</div>
<div class="name-job">
<div class="profile_name">Brook Beyene</div>
<div class="job">Project Manager</div>
</div>
<span class="material-icons-sharp">logout</span>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<span class="material-icons-sharp bx-menu">menu</span>
<span class="text">Drop Down Sidebar</span>
</div>
</section>
</body>
</html>

My suggestion is to use a cookie to store and read the value on change. It will keep the data persistant on reload that way.

How can I make the social links in my mobile menu fit together on one line?

I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>

Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css

Why my font color in navbar didn't change when i toggle to sticky?

I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)

You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}

How to make a sticky Navigation Bar | HTML, CSS & JS

I would like to ask how can I make my existing navbar a sticky one?
I've tried adding in the Javascript..But the alignments seem to be off.
i am taking reference from https://codingartistweb.com/2021/12/responsive-navigation-bar-html-css-js/#comment-4063 and also https://codingartistweb.com/2020/10/sticky-navbar-html-css-and-javascript-tutorial/.
document.addEventListener('DOMContentLoaded', function(){
var nav = document.getElementById("navbar");
var current_pos = nav.offsetTop;
window.onscroll = function(){
var window_pos = document.documentElement.scrollTop;
if(window_pos>=current_pos){
nav.classList.add("sticky");
}
else{
nav.classList.remove("sticky");
}
}
} )
const navToggler = document.querySelector(".nav-toggler");
const navMenu = document.querySelector(".site-navbar ul");
const navLinks = document.querySelectorAll(".site-navbar a");
allEventListners();
function allEventListners() {
navToggler.addEventListener("click", togglerClick);
navLinks.forEach((elem) => elem.addEventListener("click", navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle("toggler-open");
navMenu.classList.toggle("open");
}
// navLinkClick function
function navLinkClick() {
if (navMenu.classList.contains("open")) {
navToggler.click();
}
}
/* Nav Bar */
.sticky {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
background: linear-gradient(30deg, #000000, #69b962);
position: fixed;
z-index: 99;
top: 0;
}
.sticky a {
color: white;
}
/*Styling Buttons*/
.login-button {
background-color: transparent;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #063b0a;
transition: all ease-in-out 350ms;
}
.join-button {
color: #131418;
background-color: #1b878f;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
}
/* default css start */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
/* navbar regular css start */
.navbar-area {
background: linear-gradient(30deg, #000000, #69b962);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: 0.3s;
position: relative;
z-index: 99;
}
.nav-toggler span:before {
content: "";
transform: translateY(-9px);
}
.nav-toggler span:after {
content: "";
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* mobile breakpoint start */
#media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0, 0, 0, 0.75);
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
}
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar" id="navbar">
<!-- site logo -->
<a href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44" />
</a>
<!-- site menu/nav -->
<ul>
<li>Home</li>
<li>Race Information</li>
<li>FAQ</li>
<li>Contact Us</li>
<li class="login-button ">My Account</li>
<li class="join-button">Register</li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>

How can I make the footer stop overlapping with the mobile NAV bar? On the mobile view, the NAV bar goes under the footer. Any solutions?

I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
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 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
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;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms &amp Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}

Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.

Categories

Resources