lock and unlock according to a condition - javascript

In this website : website
code involved :
/* CSS Document */
/* Float Elements
---------------------------------*/
.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/
.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Navigation
---------------------------------*/
.main-nav-outer {
padding: 0px;
border-bottom: 1px solid #dddddd;
box-shadow: 0 4px 5px -3px #ececec;
position: relative;
background: #fff;
}
.main-nav {
text-align: center;
margin: 10px 0 0px;
padding: 0;
list-style: none;
}
.main-nav li {
display: inline;
margin: 0 1px;
}
.main-nav li a {
display: inline-block;
color: #222222;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height: 20px;
margin: 17px 32px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.main-nav li a:hover {
text-decoration: none;
color: #7cc576;
}
.small-logo {
padding: 0 32px;
}
.main-section {
padding: 90px 0 110px;
}
/* Portfolio
---------------------------------*/
.Portfolio-nav {
padding: 0;
margin: 0 0 45px 0;
list-style: none;
text-align: center;
}
.Portfolio-nav li {
margin: 0 10px;
display: inline;
}
.Portfolio-nav li a {
display: inline-block;
padding: 10px 22px;
font-size: 12px;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background: #f7f7f7;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-nav li a:hover {
background: #7cc576;
color: #fff;
text-decoration: none;
}
.portfolioContainer {
margin: 0 auto;
padding-left: 15px;
}
.Portfolio-box {
text-align: center;
margin-bottom: 30px;
height: 350px;
width: 350px;
overflow: hidden;
float: left;
padding: 0;
}
.Portfolio-box img {
margin-bottom: 25px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-box img:hover {
opacity: 0.6;
}
.Portfolio-nav li a.current {
background: #7cc576;
color: #fff;
text-decoration: none;
}
img {
max-width: 100%;
}
/* no transition on .isotope container */
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
.main-section.paddind {
padding-bottom: 60px;
}
/* Clients
---------------------------------*/
.client-part {
background: url(../img/section-bg1.jpg) center center no-repeat;
background-size: cover;
padding: 55px 0;
text-align: center;
}
.client-part-haead {
color: #fdfdfd;
font-size: 28px;
line-height: 41px;
margin: 30px 0 10px;
font-family: ''Open Sans',sans-serif';
font-style: italic;
}
.client {
padding: 0;
margin: 20px 0 0;
list-style: none;
text-align: center;
}
.client li {
display: inline;
margin: 0 15px;
}
.client li a {
display: inline-block;
}
.client li a img {
margin-bottom: 15px;
border-radius: 50%;
}
.client li a:hover {
text-decoration: none;
}
.client li a h3 {
color: #ffffff;
}
.client li a span {
color: #f1f1f1;
}
.quote-right {
font-style: normal;
width: 68px;
height: 68px;
margin: 0 auto;
border: 2px solid #7cc576;
border-radius: 50%;
display: block;
line-height: 68px;
text-align: center;
font-size: 27px;
color: #7cc576;
cursor: pointer;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.quote-right:hover {
color: #fff;
border: 2px solid #fff;
}
.c-logo-part {
background: #7cc576;
padding: 25px 0;
filter: alpha(opacity=60);
}
.c-logo-part ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.c-logo-part ul li {
display: inline;
margin: 0 25px;
}
.c-logo-part ul a {
display: inline-block;
margin: 0 20px;
}
.main-section.team {
padding: 85px 0;
}
.main-section.team h6 {
margin-bottom: 40px;
}
.portfolioContainer {
max-width: 1140px;
}
/* Animation Timers
---------------------------------*/
.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span.fa-stack.fa-5x.has-badge {
width: 180px;
height: 180px;
}
#unlocked li:before {
content: '\2713';
display: inline-block;
color: green;
margin-left: -65px;
padding: 0 9px 0 0;
}
#unlocked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
#locked li:before {
content: '\274c';
display: inline-block;
color: red;
margin-left: -65px;
padding: 0 9px 0 0;
}
#locked li {
list-style-type: none;
font-size: 1.5em;
margin: 1px;
font-weight: bold;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
<link rel="stylesheet" href="css/stylebadge.css">
</head>
<body>
<header class="header" id="header">
<!--header-start-->
<div class="container">
<figure class="logo animated fadeInDown delay-07s">
<a href="#">
<img src="img/logo.png" alt="">
</a>
</figure>
<h1 class="animated fadeInDown delay-07s">Welcome To Knight Studios</h1>
<ul class="we-create animated fadeInUp delay-1s">
<li>We are a digital agency that loves crafting beautiful websites.</li>
</ul>
<a class="link animated fadeInUp delay-1s" href="#">Get Started</a>
</div>
</header>
<!--header-end-->
<nav class="main-nav-outer" id="test">
<!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Home
</li>
<li>Services
</li>
<li>Badges
</li>
<li class="small-logo">
<a href="#header">
<img src="img/small-logo.png" alt="">
</a>
</li>
<li>Clients
</li>
<li>Team
</li>
<li>Contact
</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
<!--main-nav-end-->
<section class="main-section paddind" id="Portfolio">
<!--main-section-start-->
<div class="container">
<h2>Badges</h2>
<h6></h6>
<div class="portfolioFilter">
<ul class="Portfolio-nav wow fadeIn delay-02s">
<li>All Badges
</li>
<li>Salesforce
</li>
<li>L & TD
</li>
</ul>
</div>
</div>
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=10>
<div class="badgesize">
<img src="img/66.png" alt="">
</div>
</span>
<h3>Completionist</h3>
<p>Didnot submit timesheet for a week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class="Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=15>
<div class="badgesize">
<img src="img/11.png" alt="">
</div>
</span>
<h3>Get A LIFE</h3>
<p>Logged greater than 60 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=2>
<div class="badgesize">
<img src="img/22.png" alt="">
</div>
</span>
<h3>Slogger</h3>
<p>Logged greater than 55 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<img src="img/1.png" alt="">
</div>
</span>
<h3>Into The Game</h3>
<p>Starts Playing the Game</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<img src="img/2.png" alt="">
</div>
</span>
<h3>Hipster</h3>
<p>Branding</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=20>
<div class="badgesize">
<img src="img/7.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=0>
<div class="badgesize">
<img src="img/ltd1.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=200>
<div class="badgesize">
<img src="img/ltd2.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>
<ul id="locked">
<li>LOCKED</li>
</ul>
</div>
</div>
</section>
<!--main-section-end-->
<section class="business-talking">
<!--business-talking-start-->
<div class="container">
<h2>Let’s Talk Business.</h2>
</div>
</section>
<!--business-talking-end-->
<script type="text/javascript">
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function() {
$('.main-nav').slideToggle();
return false
});
});
</script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
</script>
<script type="text/javascript">
$(window).load(function() {
$('.main-nav li a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500, 'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
})
</script>
<script type="text/javascript">
$(window).load(function() {
var $container = $('.portfolioContainer'),
$body = $('body'),
colW = 375,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function() {
// check if columns has changed
var currentColumns = Math.floor(($body.width() - 30) / colW);
if (currentColumns !== columns) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width(columns * colW)
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
});
return false;
});
});
</script>
</body>
</html>
I have two conditions for badges :(below are the two badges)
Issue :
when the count (which appears on the upper right side of the badge as "10" and "0" here) is greater than "0" then "unlocked with check mark" should be displayed else "locked with cross" should be dispalyed and it should be faded as in hover effect we see normally.
Its quite tricky for me.Kindly help,if anyone can.Thanks a lot.God bless.


You could iterate all Portfolio-box, check when they have a span badge with data-count > 0, then show/hide the locked/unlocked
$.each($('.Portfolio-box'), function() {
var count = $(this).children('has-badge').attr('data-count');
if(count > 0) {
$(this).children('ul.locked').hide();
$(this).children('ul.unlocked').show();
} else {
$(this).children('ul.locked').show();
$(this).children('ul.unlocked').hide();
}
});
And in your html replace
<ul id="unlocked">
<ul id="locked">
For
<ul class="unlocked">
<ul class="locked">
Another option you could do is to use PHP to not generate the HTML for locked/unlocked based on your business rule, something like:
<?php if($badgeCount >0): ?>
<ul class="unlocked">
....
</ul>
<? else: ?>
<ul class="locked">
....
</ul>
<? endif; ?>

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 to change the showing section with javascript

i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!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="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>

You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

How do I add content (writings) to my website apart from my side navigation bar?

I am working on a small website right now, but I have encountered this problem that is quite troublesome.
Ive successfully created a side navigation bar, following tips and tutorials, but am struggling in putting my content to the website. Every time I try it always ends up on the nav bar, so how do I add content out of/apart the nav bar? Another problem is that theres a white gap above everything, but that seems alright for now.
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
* {
margin:0;
padding:0;
text-decoration: none;
list-style: none;
}
a { color: inherit; }
h1 {
margin-top: 0;
}
.toggle_menu{
position: fixed;
padding: 10px 10px 10px 10px;
margin-top: 70px;
color: white;
cursor: pointer;
background-color: #648B79;
z-index: 1000000;
font-size: 2em;
}
.sidebar_menu{
position: fixed;
width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: white;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.boxed_item{
font-family: 'Open Sans';
font-weight:200;
padding: 10px 20px;
display: inline-block;
border:solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;
}
.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}
.navigation_selection{
margin: 20px 0;
display: block;
width: 200px;
margin-left: 25px;
}
.navigation_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 12px 0;
box-sizing: border-box;
font-size: 14px;
color: #D8D8D8;
border-bottom: solid 1px #D8D8D8;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.boxed_item_smaller{
font-size: 12px;
color: #D8D8D8;
width: 200px;
transition: all 0.3s ease-in-out;
cursor: pointer;
border-width: 1px;
margin: 0 0 20px 0;
}
.boxed_item_smaller:hover{
background-color: white;
color: #111;
transition: all 0.3s ease-in-out;
}
.hide_menu{
margin-left: -250px;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
.post-body {
position: relative;
padding: 0 20px 20px;
}
.post-content {
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Open Sans";
font-weight: 300;
font-size: 1.2em;
line-height: 1.5;
}
<!doctype html>
<html>
<head>
<!--stylesheets-->
<link rel="stylesheet" type="text/css" src="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<!--scripts-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="menu.js"></script>
<script src="https://use.fontawesome.com/6cde4f18cc.js"></script>
<!--meta-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide-Out Navigation Bar</title>
</head>
<body>
<i class="fa fa-bars toggle_menu"></i>
<div class="sidebar_menu">
<i class="fa fa-times"></i>
<center>
<h1 class="boxed_item">Cupcakery</h1>
<h2 class="logo_title">The best cupcakes in town!</h2>
</center>
<ul class="navigation_selection">
<li class="navigation_item">Cupcakes & Orders</li>
<li class="navigation_item">Who we are</li>
<li class="navigation_item">Our Location</li>
<li class="navigation_item">Contact Us</li>
</ul>
<center>
<a href="#"><h1 class="boxed item boxed_item_smaller">
<i class="fa fa-user"></i>
ORDER NOW!
</h1></a>
</center>
<div class="post-body">
<section class="post-content">
<!--PROBLEM-->
<p>testing, why does this show up on the navbar?</p>
</body>
</html>

It looks like you are missing a closing "div" tag:
* {
margin:0;
padding:0;
text-decoration: none;
list-style: none;
}
a { color: inherit; }
h1 {
margin-top: 0;
}
.toggle_menu{
position: fixed;
padding: 10px 10px 10px 10px;
margin-top: 70px;
color: white;
cursor: pointer;
background-color: #648B79;
z-index: 1000000;
font-size: 2em;
}
.sidebar_menu{
position: fixed;
width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: white;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.boxed_item{
font-family: 'Open Sans';
font-weight:200;
padding: 10px 20px;
display: inline-block;
border:solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;
}
.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}
.navigation_selection{
margin: 20px 0;
display: block;
width: 200px;
margin-left: 25px;
}
.navigation_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 12px 0;
box-sizing: border-box;
font-size: 14px;
color: #D8D8D8;
border-bottom: solid 1px #D8D8D8;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.boxed_item_smaller{
font-size: 12px;
color: #D8D8D8;
width: 200px;
transition: all 0.3s ease-in-out;
cursor: pointer;
border-width: 1px;
margin: 0 0 20px 0;
}
.boxed_item_smaller:hover{
background-color: white;
color: #111;
transition: all 0.3s ease-in-out;
}
.hide_menu{
margin-left: -250px;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
.post-body {
position: relative;
padding: 0 20px 20px;
}
.post-content {
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Open Sans";
font-weight: 300;
font-size: 1.2em;
line-height: 1.5;
}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="menu.js"></script>
<script src="https://use.fontawesome.com/6cde4f18cc.js"></script>
<i class="fa fa-bars toggle_menu"></i>
<div class="sidebar_menu">
<i class="fa fa-times"></i>
<center>
<h1 class="boxed_item">Cupcakery</h1>
<h2 class="logo_title">The best cupcakes in town!</h2>
</center>
<ul class="navigation_selection">
<li class="navigation_item">Cupcakes & Orders</li>
<li class="navigation_item">Who we are</li>
<li class="navigation_item">Our Location</li>
<li class="navigation_item">Contact Us</li>
</ul>
<center>
<a href="#"><h1 class="boxed item boxed_item_smaller">
<i class="fa fa-user"></i>
ORDER NOW!
</h1></a>
</center>
</div> <!--closing sidebar_menu div -->
<div class="post-body">
<section class="post-content">
<!--PROBLEM-->
<p>testing, why does this show up on the navbar?</p>
If you add the closing tag right before your "post-body" div, it should adjust and not show in your nav menu.

Nav bar animation

I want it so you click on something on the menu, the menu disappears and takes you to where you are leaded.
Here is the HTML doucument.
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title></title>
</head>
<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><i class="icon-home"></i> Play</li>
<li><i class="icon-file-alt"></i> about</li>
<li><i class="icon-copy"></i> XXXXXX</li>
<li><i class="icon-envelope"></i> contacts</li>
</ul>
</div>
</nav>
</html>
And here is the css.
Thank you!

You have your styling for that menu overlay tied to the checkbox's checked property in the css. So when you click the checkbox, it changes some properties on the menu (z-index and opacity) to show it. In order for it to fall back to the default state of not showing the menu, you have to have that checkbox unchecked (if you want to use your css as-is). To do this, you can use Javascript. I used jQuery in the snippet below to set the checked property of your checkbox to false whenever you click on a link inside the menu, and magically your menu goes away! cheers!
(I should add that this solution would require jQuery 1.6 or newer. That's when prop was introduced. If that's an issue, there is great write up by user #Xian on modifying the checked property in different ways here: Setting "checked" for a checkbox with jQuery? )
$(function() {
$(".box a").on("click",function() {
$("#toggle-nav").prop('checked', false)
});
});
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
body {
font-family: 'Lato', sans-serif;
background: #353535;
color: #FFF;
}
#text {
color: #888;
}
.jumbotron h1 {
color: #353535;
}
/* under play */
footer {
margin-bottom: 0 !important;
margin-top: 80px;
}
footer p {
margin: 0;
padding: 0;
}
span.icon {
margin: 0 5px;
color: #D64541;
}
h2 {
color: #BDC3C7;
text-transform: uppercase;
letter-spacing: 1px;
}
.mrng-60-top {
margin-top: 60px;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-one {
color: white;
cursor: pointer;
display: block;
position: relative;
width: 100%;
margin-left: 170%;
border: 2px solid white;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
margin-bottom: 0 !important;
margin-top: 80px;
}
a.animated-button.thar-one:hover {
color: white !important;
background-color: black;
text-shadow: none;
}
a.animated-button.thar-one:hover:before {
bottom: 0%;
top: auto;
height: 100%;
margin: 0 auto;
}
a.animated-button.thar-one:before {
display: white;
position: absolute;
left: 0px;
top: 0px;
height: 0px;
width: 100%;
z-index: -1;
content: '';
color: black !important;
background: black;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
* { padding: 0px; margin: 0px; border: 0px; outline: 0px; } /* fast reset */
body {
font-family: 'Merriweather Sans', Arial, sans-serif;
font-size: 12px;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
li { list-style: none; }
.something { margin: 0px 20% 0px 20%; }
#head { margin-top: 20px; }
#menu .box {
position: fixed;
text-align: center;
overflow: hidden;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(0,0,0,0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu ul {
position: relative;
top: 20%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#menu li {
display: inline-block;
margin: 20px;
}
#menu li a {
border-radius: 3px;
padding: 15px;
border: 1px solid transparent;
text-decoration: none;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#menu li a:hover { border-color: #fff; }
#menu li a i {
margin-right: 5px;
font-size: 24px;
}
/* Box */
#toggle-nav-label {
color: rgba(0,0,0,0.5);
background: white;
text-align: center;
line-height: 30px;
font-size: 16px;
display: block;
cursor: pointer;
position: relative;
z-index: 500;
width: 30px;
height: 30px;
border-radius: 10px;
}
#toggle-nav { display: none; }
#toggle-nav:checked ~ .box {
opacity: 1;
z-index: 400;
}
#toggle-nav:checked ~ .box ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#toggle-nav:checked ~ #toggle-nav-label {
background: #fff;
color: rgba(0,0,0,0.8);
}
#content { margin: 20px 0px 20px 0px; }
#content h1 {
margin-bottom: 20px;
font-size: 30px;
}
#content p {
font-size: 14px;
line-height: 150%;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><i class="icon-home"></i> Play</li>
<li><i class="icon-file-alt"></i> about</li>
<li><i class="icon-copy"></i> XXXXXX</li>
<li><i class="icon-envelope"></i> contacts</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- end header -->
</div>
</section>
<!-- end content -->
<div class="jumbotron text-center">
<div class="container">
<h1>Das Krankenhuas</h1>
<p style="color:#888;">A game you will never escape</p>
</div>
</div>
<div class="container">
</div>
<div id="h1">
<center>
<h3> About The Game </h3>
</div>
<div id="text">
<center>
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
<div id="h1">
<center>
<h3> Update log</h3>
</div>
<div id="text">
<center>
<p> Update 1: Where it all started.
<br> <br>
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun.
<br> <br>
Update 3: fix search guard and some bugs. Interrgatoin room. </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</div>
<a id="play"></a>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6"> Play </div>
</div>
</div>
<footer class="jumbotron text-center">
<div class="container">
<p style="color:#888">Copy righted 2good4you</p>
</div>
</footer>

Categories

Resources