Develop Reference

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.

Change header and content based off the tab selected

I have a menu bar that changes the tab based on which one is selected. Right now both of the headers aren't displaying properly with each of the tabs and I was wondering how I can fix this?
When I move the content-header div into the content div with the associated tab, the styling gets messed up, but when I take it out and leave it where it's at, the header gets duplicated to the other tabs. I have provided a screenshot of what I'm trying to achieve and the code as well.
(How I want to display each tab: Each will have their own header that's specific to the tab selected)
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

There are a few things you need to do.
Add a wrapper to content-panel and content main with these styles:
width: 100%;
display: flex;
flex-direction: row;
Move your content-headers inside the content class
Finally provide a width of 100% to content-headers
And here is the working example:
https://codepen.io/saadramay/pen/NWMgxrB

My :hover transform scale and button are not working on part of the page

I am working on a website with pricing tables. These pricing tables have a button at the bottom and have a transform scale on hover, but they're not working as intended. The table at the bottom of the page works as intended but the ones above it do not. Does anyone have an explanation as to why this occurs?
Here is my CSS and HTML code for this part of the site :
.first-titre-table {
color: black;
font-size: 40px;
font-family: 'Open Sans';
}
.titre-table {
margin-top: 50%;
color: black;
width: auto;
height: auto;
font-size: 40px;
font-family: 'Open Sans';
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.snip1404 {
font-family: 'Open Sans';
color: #ffffff;
text-align: left;
font-size: 16px;
max-width: 1000px;
left: 20%;
margin-right: auto;
width: 100%;
padding: 10px;
margin-top: 7%;
display: block;
flex-wrap: wrap;
align-content: center;
position: relative;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 6px;
margin-top: 7px;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 5px solid #730000;
box-shadow: 0px 0px 10px #000;
background-color: #b30000;
}
.snip1404 .plan:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #b30000;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title::after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.9em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin-left: 10px;
list-style: outside none none;
text-align: center;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #700000;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #ff4d4d;
}
.text-garantie {
font-size: 17px;
display: inline;
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 7px #ddd;
}
#media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .plan-featured .plan-select {
padding: 20px;
}
.snip1404 .plan-featured {
margin-top: 0;
}
}
#media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
.snip1404 .plan-non-featured {
width: 100%;
}
.snip1404 .plan-featured {
width: 100%;
}
}
<div class="snip1404">
<h2 class="first-titre-table">
Contrats Chaudière Gaz
</h2>
<div class="plan">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost">
<span class="plan-price">
188€
</span>
<span class="plan-type">
/an
</span>
</div>
</header>
<ul class="plan-features">
<li>
1 intervention/an
</li>
<li style="margin-bottom:63%;">
</li>
</ul>
<div class="plan-select">
<a href="">
Choisir
</a>
</div>
</div>
</div>
For the HTML, all the pricing tables have the same code. The only difference between them is the price showed and the number of lines in the "plan-features" list. I am also using some JavaScript code but I do not think it causes the problem. I could always post the script if needed.

The problem is with float:left on .plan . Using float will get the element out of the normal flow of the document. That's why you should never use float for layout purposes. This causes the floated element to not be inside it's container so you cannot interact with it ( hover ) as you would like.
Use flex instead on the container snip1404 . And width:100% on the title which i see has many 'names'. You should use a common class for all headings and give that class a width:100% . Then everything will go well.
Also the positioning with position:absolute on the content is not ideal. Other margins and etc look strange. But your problem is definitely caused by float:left.
Also, to position the button on the bottom, do not use margin-bottom:63% or something like that on a li. That almost never works on a responsive website. You have many options to make sure the button will always stay at the bottom.
You can also use display:flex together with flex-direction: column on the plan element. This is because we want to use flex styles on it's children and column because we want it's children to position one on top of the other not side by side. Then use flex-grow:1 on the list ( features ) so it will grow and occupy in height the available space between the header and the button. So the button will always be at the very bottom of the plan element.
i made a simple example below
.snip1404 {
display:flex;
flex-wrap: wrap;
}
.first-titre-table { /* here use a common class for all titles */
width:100%;
}
.plan {
background:red;
/* use display:flex so we can use flex styles on the children */
display:flex;
flex-direction: column;
/* no float left */
}
.plan-features {
/* will occupy all the space available between the header and the button */
flex-grow:1;
}
.plan:hover {
transform: scale(1.2);
}
<div class="snip1404">
<h2 class="first-titre-table">Contrats Chaudière Gaz</h2>
<div class="plan">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost"><span class="plan-price">188€</span><span class="plan-type">/an</span></div>
</header>
<ul class="plan-features">
<li>1 intervention/an</li>
<li style="margin-bottom:63%;"></li>
</ul>
<div class="plan-select">Choisir</div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost"><span class="plan-price">188€</span><span class="plan-type">/an</span></div>
</header>
<ul class="plan-features">
<li>1 intervention/an</li>
<li style="margin-bottom:63%;"></li>
</ul>
<div class="plan-select">Choisir</div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Contrat 1 an
</h4>
<div class="plan-cost"><span class="plan-price">188€</span><span class="plan-type">/an</span></div>
</header>
<ul class="plan-features">
<li>1 intervention/an</li>
<li></li>
</ul>
<div class="plan-select">Choisir</div>
</div>
</div>

Fixing navbar sub-menus from going off-screen

I am using the following script as navbar, however I can't figure out how to make the menus/submenus respect the screen sides, and not continue to open outside of the screen border.. I don't want to change the default behavior (direction) of all the menus, just to change it it it would be cut by any of the sides..
I found a similar post (and another one too), but I don't know how to implement the same answer to this current code.
Example of the menu being cut by the side of the monitor:
Here is the code snippet, along with jsfiddle link too.
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>

in your sub-sub menus you're aligning based on left margin at 149px, just use the same attribute but instead for the right. right:149px; instead of left:149px;
ul.sub-menu ul.sub-menu {
/* level 3+ */
right: 149px;
}
Also you can align the sub menus to the left of the nav items. To do this use :
ul.sub-menu {
/* level 2 */
right: 0;
left: initial;
}
I included both examples in this snippet:
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
body {
background-color: #eee;
background-image: url(../images/patterns/light_toast.png);
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol,
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap>header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu>li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu>li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu>li.parent>a {
padding-left: 14px;
}
#main-menu>li>a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu>li:hover>a,
#main-menu>li.current-menu-item>a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu {
/* level 2 */
display: none;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
right:0;
left:initial;
}
ul.sub-menu ul.sub-menu {
/* level 3+ */
margin-top: -1px;
padding-top: 0;
right: 149px;
top: 0px;
}
ul.sub-menu>li>a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu>li>a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu>li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu>li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu>li:last-child>a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu>li>a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover>ul.sub-menu {
display: block;
/* show the submenu */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="#"><img src="https://www.gravatar.com/avatar/851659509f07dd2fe27882da61f0da0a?s=64" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages ></a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>

I guess the real question here is, where do you want it to go? If there's no page real estate to the right of your menu, you can't place the submenu to the right, you have to place it to the left.
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: -149px;
top: 0px;
}
Note, the left value is changed from 149px to -149px. That places the submenu to the left (where you have screen real estate), and not to the right, where you don't.

How to fit unordered list inside of parent span, mine skips to the next line instead of flowing downward

I am writing this code and I want to include 3 buttons under the photo of the recipe as icons, such as a time icon and then the time it takes to make it to the right of the icon. However, the list does not go under the card, it instead moves to a new line.
HTML:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/recipes.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../javascript/recipes.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="btn">
<a href="../index.html">
<button id="logobtn">
<img src="../images/logo.png" class="logo" alt="Chef logo">
</button>
</a>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Restaurants</li>
<li>Recipes</li>
<li>Requests</li>
</ul>
</nav>
</header>
<h1> Recipes </h1>
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<img src="../images/benedict.jpg" class="cardpic">
<span class="card-title">
<h3>Eggs Benedict</h3>
</span>
</span>
<span class="cardsummary">
<p> Love it <br><br><br></p>
<ul>
<li><i class="fa fa-adn"></i> </li>
<li><i class="fa fa-android"></i> </li>
<li> <i class="fa fa-apple"></i> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/eclair.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
<ul class="list-inline">
<li><i class="fa fa-adn"></i> </li>
<li><i class="fa fa-android"></i> </li>
<li> <i class="fa fa-apple"></i> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/penne.jpg" class="cardpic">
<span class="card-title">
<h3>Penne alla Vodka</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
</div>
</body>
</html>
The card summary with text is displayed properly, under the photo, but anytime I place the list inside of that div it takes on its own property and display elements, instead of wrapping with the parent container.
I am tying to essentially add stylized icons under EACH card as a summary header, and then I will have the text below all 3 of the icons present in every card, but the list of icons just keeps moving onto the next line, and I truly can't figure it out.
CSS:
body {
font-family: oswald;
font-weight: normal;
text-transform: uppercase;
text-align: center;
background-color: #fff4ea;
}
.background {
width: 100%;
height: 100%;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
li a:hover {
color: #E49273;
}
span:hover {
color: #E49273;
}
header {
background: #fff4ea;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
padding-bottom: 30px;
border-bottom: 1px solid black;
z-index: 100;
}
.btn {
-webkit-transition all: 700ms ease;
transition all: 700ms ease;
cursor: pointer;
}
#logobtn {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
float: left;
margin-top: 2px;
margin-left: 8px;
width: 100px;
height: 104px;
}
.logo{
width: 100px;
height: 104px;
}
nav {
float: right;
padding: 20px;
}
nav ul {
list-style: none;
overflow: auto;
position: relative;
}
nav li {
display: inline-block;
float: left;
padding: 10px;
font-size: 30px;
}
.current {
color: #A37A74;
}
h1 {
text-align: center;
position: relative;
top: 100px;
color: #7180AC;
font-size: 5em;
line-height: 1.15em;
}
h2 {
font-size: 2em;
color: black;
line-height: 1.15em;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
.skew-forward {
-webkit-transform-origin: 10% 100%;
transform-origin: 10% 100%;
}
.skew-forward:hover {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
#media only screen and (max-width : 685px) {
header {
position: absolute;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
right: 0px;
top: 75px;
width: 50%;
}
nav li {
text-align: right;
width: 100%;
padding: 15px 0px;
margin: 0;
}
nav:hover ul {
display: block;
}
a:hover {
color: yellow;
}
}
#media only screen and (max-width: 790px) {
div.btn {
display: none;
}
}
#media only screen and (max-width: 1000px) {
h1 {
float: none;
display: none;
font-size: 3em;
}
.card {
margin-top: 15%;
}
}
#import "compass";
#import "breakpoint";
/*//Todo clean up some crappy code
*/
.cards {
display: flex;
flex-wrap: wrap;
margin-top: 10%;
box-sizing: border-box;
}
.card {
width: 25%;
position: relative;
margin-bottom: 5%;
margin-right: 2%;
margin-left: 3%;
color: #363636;
}
.cardpic {
position: inherit;
width: 100%;
height: auto;
max-width: 100%; // stop images from breaking out of their bounding boxes.
}
#media (max-width: 700px) {
width: 100%;
}
#include box-shadow(rgba(black, 0.19) 0 0 8px 0);
#include border-radius(4px);
#include breakpoint(700px, $no-query: true) {
/* //switch to 2 columns
*/ max-width: 320px;
margin-right: 20px;
margin-bottom: 20px;
&:nth-child(even) {
margin-right: 0;
}
}
/*#include breakpoint(980px, $no-query: true) {
//switch to 3 columns
&:nth-child(even) {
margin-right: 20px;
}
&:nth-child(3n) {
margin-right: 0;
}
}*/
span {
display: block;
}
.card-summary {
position: relative;
padding-top: 5%;
}
.cardsummary {
position: relative;
padding-top: 5%;
margin-top: 10%;
}
.card-header {
position: inherit;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;
border-radius(4px 4px 0 0);
max-width: 100%;
margin-top: 0%;
}
.card-title {
background: rgba(255,255,255,0.60);
padding: 3.5% 0 3.5% 0;
color: black;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0.5%;
width: 100%;
}
h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
.icon-zoom{
position: inherit;
}
ul {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
list-style-type: none;
}
/*---- Genral classes end -------*/
/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
JS:
$(document).ready(function(){
$("#logobtn").hover(function(){
$(this).toggleClass("skew-forward").toggleClass("blur");
});
$("a[href='#']").click(function(e) {
e.preventDefault();
});
})

You have <a> in <a>. If you remove one <a> for example from all <ul> lists:
<li><i class="fa fa-adn"></i></li> the <ul> element will be correctly interpreted by the browser.
To have <ul><li> elements in one line you can use for example "display: flex; justify-content: center" on <ul> or "float: left;" on <ul><li> elements.
To check markup validity you can use also https://validator.w3.org