We Keep Coding

Spacing problem between Header and Sidebar

I'm programming a page and I have a Header and a Sidebar but I'm in trouble with the top property overlapping my header, the sidebar would have to have the top value zeroed but in this scenario it overlaps my header by changing the value to 10 for example I solve this problem of overlapping but create an unwanted spacing when Scrolling. I am new to the world of web design but I have tried several solutions for such an event but none solves such a occurred.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Header */
header .navbar {
font-size: 15px;
background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
header #navbarNavAltMarkup {
justify-content: flex-end;
}
header #navbarNavAltMarkup .nav-link {
color: #fff;
transition: all ease 0.2s;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .nav-link:hover {
color: #081145;
transition: all ease 0.2s;
}
header #navbarNavAltMarkup .active {
color: #081145;
font-weight: 400;
}
header #navbarNavAltMarkup .dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 15px;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
background-color: transparent;
}
header #navbarNavAltMarkup .dropdown {
position: relative;
display: inline-block;
}
header #navbarNavAltMarkup .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
header #navbarNavAltMarkup .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
header #navbarNavAltMarkup .dropdown a:hover {
background-color: #ddd;
}
header #navbarNavAltMarkup .show {
display: block;
}
/* Test */
/* Mobile */
header .navbar-nav {
align-items: center;
}
/* End Header */
/* Aside */
.sidebar {
position: fixed;
left: 0;
top: 10;
height: 100%;
width: 78px;
/* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
background: #11101D;
padding: 2px 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;
}
.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 ol,
ul {
padding-left: 0px;
}
.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: #1d1b31;
}
.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: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover {
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover {
background: #FFF;
color: #11101d;
}
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.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: #1d1b31;
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: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out {
width: 50px;
background: none;
}
body {
background: #E4E9F7;
}
.home-section {
position: relative;
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;
}
}
/* End Aside */
<header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon p-0 m-0">
<img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
</span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">PAINEL</a>
<a class="nav-link" href="#">CNGR</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
<a class="nav-link" href="#">VOIP</a>
<div class="dropdown ">
<button onclick="myFunction()" class="dropbtn">
PROFILE
</button>
<div id="myDropdown" class="dropdown-content">
Perfil
Logout
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<sidebar class="sidebar">
<div class="logo-details">
<i class='bx bx-phone icon'></i>
<div class="logo_name">VOIP</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-data'></i>
<span class="links_name">Database</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</li>
</ul>
</sidebar>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
</main>

As told there can be 2 solutions to your problem :
You can use z-index on header and put it above sidebar
For that have use z-index value of sidebar to be -1 . As using this you must be careful as some content may overlap(overlay) your sidebar so it is better to leave a margin on the left
Use sticky property to have it stick to top when scrolling
You have to make a lot of changes in your CSS to make a look right now , but for a start you can use display: block along position: sticky to have a start and improve on the go
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Header */
header .navbar {
font-size: 15px;
background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
header #navbarNavAltMarkup {
justify-content: flex-end;
}
header #navbarNavAltMarkup .nav-link {
color: #fff;
transition: all ease 0.2s;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .nav-link:hover {
color: #081145;
transition: all ease 0.2s;
}
header #navbarNavAltMarkup .active {
color: #081145;
font-weight: 400;
}
header #navbarNavAltMarkup .dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 15px;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
background-color: transparent;
}
header #navbarNavAltMarkup .dropdown {
position: relative;
display: inline-block;
}
header #navbarNavAltMarkup .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
header #navbarNavAltMarkup .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
header #navbarNavAltMarkup .dropdown a:hover {
background-color: #ddd;
}
header #navbarNavAltMarkup .show {
display: block;
}
/* Test */
/* Mobile */
header .navbar-nav {
align-items: center;
}
/* End Header */
/* Aside */
.sidebar {
position: fixed;
left: 0;
top: 10;
height: 100%;
width: 78px;
/* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
background: #11101D;
padding: 2px 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;
}
.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 ol,
ul {
padding-left: 0px;
}
.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: #1d1b31;
}
.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: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover {
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover {
background: #FFF;
color: #11101d;
}
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.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: #1d1b31;
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: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out {
width: 50px;
background: none;
}
body {
background: #E4E9F7;
}
.home-section {
position: relative;
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;
}
}
/* End Aside */
<header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon p-0 m-0">
<img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
</span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">PAINEL</a>
<a class="nav-link" href="#">CNGR</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
<a class="nav-link" href="#">VOIP</a>
<div class="dropdown ">
<button onclick="myFunction()" class="dropbtn">
PROFILE
</button>
<div id="myDropdown" class="dropdown-content">
Perfil
Logout
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<sidebar class="sidebar">
<div class="logo-details">
<i class='bx bx-phone icon'></i>
<div class="logo_name">VOIP</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-data'></i>
<span class="links_name">Database</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</li>
</ul>
</sidebar>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
</main>
With 1st solution there also comes some problem like your content will be hidden under header until you scroll . Here you can use margin and sticky for inside content of sidebar or it is better to improve CSS and go 2nd option

You can give dashboard overflow-Y: scroll and reduce its width to 100%-open sidebar width(flexbox will adjust dashboard´s width automatically if you give sidebar element min-width: max-content;). This is how you stick your sidebar in place without using position or z-index. I will give you a little example
const button = document.querySelector('button');
const sidebar = document.querySelector(".sidebar");
button.onclick = () => {
sidebar.classList.toggle('active');
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.header {
height: 10vh;
background: red;
}
.content {
display: flex;
flex-flow: row nowrap;
}
.content .sidebar {
width: 5%;
background: black;
height: 90vh;
}
.content .sidebar.active {
width: 20%;
}
.content .dashboard {
height: 90vh;
width: 100%;
background: green;
overflow-y: scroll;
scroll-behavior: smooth;
}
.content .dashboard .hard-coded-overflow {
height: 1000px;
}
<body>
<div class="header"></div>
<div class="content">
<div class="sidebar active">
<button class="close">close</button>
</div>
<div class="dashboard">
<div class="hard-coded-overflow">
</div>
</div>
</div>
</body>
You can add transition to make it seem like a proper animation and it is way better user experience than overlaping sidebar on top of main content( that should happen when media width is adequate for mobile devices).

Dropdown menu not closing when another dropdown is open(active)

I am trying to make a dropdown menu where the .dropdown-content shows up when is clicked, and disappears if the user clicks any other dropdown in the bar. The problem is I have multiple dropdown classI think I just need help revising my existing javascript.
I would like that the sidebar(nav) only display the dropdown menu that is current active. On my code when you open a dropdown it still open until the user click the dropdown arrow again to close that specific one.
$(document).ready(function() {
"use strict"; // Start of use strict
//Sidebar menu
$('.show-sidebar').on('click', function() {
$('#sidebar').toggleClass('collapse-sidebar');
$('#layout-admin').toggleClass('collapse-sidebar');
});
$('.has-sub').on('click', function() {
$('.has-sub').toggleClass('open-dropdown');
$('.sub-nav').slideToggle("slow");
});
$('.has-sub2').on('click', function() {
$('.has-sub2').toggleClass('open-dropdown');
$('.sub-nav2').slideToggle("slow");
});
$('.has-sub3').on('click', function() {
$('.has-sub3').toggleClass('open-dropdown');
$('.sub-nav3').slideToggle("slow");
});
$('.has-sub4').on('click', function() {
$('.has-sub4').toggleClass('open-dropdown');
$('.sub-nav4').slideToggle("slow");
});
$('.has-sub5').on('click', function() {
$('.has-sub5').toggleClass('open-dropdown');
$('.sub-nav5').slideToggle("slow");
});
$('.has-sub6').on('click', function() {
$('.has-sub6').toggleClass('open-dropdown');
$('.sub-nav6').slideToggle("slow");
});
$('.has-sub7').on('click', function() {
$('.has-sub7').toggleClass('open-dropdown');
$('.sub-nav7').slideToggle("slow");
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
body {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
/*============================
Header
============================*/
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
ul li a .icon {
height: 40px;
width: 40px;
margin-right: 13px;
background: #ffffff1a;
display: flex;
justify-content: center;
text-align: center;
border-radius: 50%;
}
ul li a .icon span {
line-height: 40px;
font-size: 20px;
color: #b0b3b8;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
span.field-requried {
color: red;
}
.hide {
display: none;
}
#sidebar {
min-width: 250px;
max-width: 250px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-image: linear-gradient(to bottom, #000, #333);
transition: all 0.3s;
position: fixed;
top: 0;
height: 100vh;
}
#sidebar .sidebar-header {
padding: 15px 5px;
text-align: center;
height: 60px;
}
#sidebar .sidebar-header img {
width: 100px;
height: auto;
vertical-align: middle;
}
#sidebar ul.list-unstyled li {
margin-bottom: 10px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.1px;
display: block;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
position: relative;
}
#sidebar ul.list-unstyled li a.has-sub::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub2::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub3::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub4::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub5::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub6::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub7::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub8::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub2.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub3.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub4.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub5.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub6.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub7.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub8.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
text-align: center;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li:hover,
#sidebar ul.list-unstyled li.active {
background-color: rgba(255, 255, 255, 0.15);
}
#sidebar.collapse-sidebar {
min-width: 50px;
max-width: 50px;
text-align: center;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 40px;
}
#sidebar ul.list-unstyled {
padding: 0;
margin: 0;
list-style: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#layout-admin {
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
width: calc(100% - 50px);
min-height: 100vh;
transition: all 0.3s;
background-color: #f5f7f9;
}
#layout-admin .header {
height: 60px;
background-color: rgb(232, 2, 21);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 0 15px;
position: sticky;
z-index: 10;
top: 0;
width: 100%;
}
#layout-admin .header .header-left {
font-size: 0;
}
#layout-admin .header .header-right>div {
display: inline-block;
}
#layout-admin .header .header-right a {
font-size: 28px;
color: #fff;
}
#username {
font-size: 20px;
vertical-align: middle;
padding-bottom: 10px;
margin-right: 10px;
}
#layout-admin .header .header-right .setting {
margin-right: 40px;
}
#layout-admin .header .header-left button.show-sidebar {
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
/*-webkit-text-stroke: 1.5px white;*/
display: inline-block;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#layout-admin .header .header-left .logo {
display: inline-block;
vertical-align: middle;
}
#layout-admin .header .header-left .title {
display: inline-block;
vertical-align: middle;
font-size: 22px;
font-weight: 600;
color: #fff;
}
#layout-admin .header .header-left .title span {
font-weight: normal;
}
#layout-admin .content-admin {
padding: 20px;
}
#layout-admin .content-admin .title-content {
font-size: 20px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 30px;
}
#layout-admin.collapse-sidebar {
width: calc(100% - 250px);
transform: translate3d(250px, 0, 0);
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
}
.sub-nav,
.sub-nav2,
.sub-nav3,
.sub-nav4,
.sub-nav5,
.sub-nav6,
.sub-nav7,
.sub-nav8 {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.sub-nav li,
.sub-nav2 li,
.sub-nav3 li,
.sub-nav4 li,
.sub-nav5 li,
.sub-nav6 li,
.sub-nav7 li,
.sub-nav8 li {
font-size: 14px;
color: #fff;
list-style: none;
padding: 8px 15px 8px 30px;
}
#sidebarCollapse-mobile {
display: none;
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#media (max-width: 767px) {
#sidebar {
min-width: 0px;
max-width: 0px;
text-align: center;
}
#sidebar.collapse-sidebar {
min-width: 250px;
max-width: 250px;
text-align: left;
z-index: 1;
}
#sidebar .sidebar-header img {
width: 40px;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 100px;
}
#sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
}
#sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: inline-block;
}
*#layout-admin {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
width: calc(100% - 0px);
}
#layout-admin.collapse-sidebar {
width: calc(100% - 0px);
transform: translate3d(0px, 0, 0);
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
}
#layout-admin .header .header-left .title {
font-size: 16px;
}
#layout-admin .header .header-right a {
font-size: 22px;
}
#username {
font-size: 14px;
}
#sidebar.collapse-sidebar #sidebarCollapse-mobile {
display: inline-block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<nav id="sidebar">
<!--------------------- Sidebar header ---------------------------->
<div class="sidebar-header">
<img src="/common/images/logo.svg" alt="logo">
<button type="button" id="sidebarCollapse-mobile" class="show-sidebar">
<i class="fa fa-bars"></i>
</button>
</div>
<!--------------------- Sidebar menu ---------------------------->
<ul class="list-unstyled nav-links">
<li class="active">
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Home</span>
</a>
</li>
<li id="li-pendingorders">
<a href="javascript:void(0)" class="has-sub open-dropdown">
<i class="fas fa-box-open" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pending Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-collectorders" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-crosshairs"></span> Collect orders</a>
</li>
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-box-open"></span> Partial collect</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-warehouse"></span> Warehouse collect</a>
</li>
<li id="li-outofstock" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-surprise"></span> Out of Stock</a>
</li>
<li id="li-ordered" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-thumbtack "></span> Ordered</a>
</li>
<li id="li-rts" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-recycle"></span> RTS</a>
</li>
<li id="li-awaitinglist" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-pause-circle"></span> Awaiting List</a>
</li>
</ul>
</li>
<li id="li-manageorders">
<a href="javascript:void(0)" class="has-sub3 open-dropdown">
<i class="fa fa-tasks" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Orders</span>
</a>
<ul class="sub-nav3" style="display: none;">
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-eye"></span> View Order</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-plus"></span> Create Order</a>
</li>
</ul>
</li>
<li id="li-packorders">
<a href="javascript:void(0)" class="has-sub5 open-dropdown">
<i class="fa fa-tape" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pack Orders</span>
</a>
<ul class="sub-nav5" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tape"></span> Pack Orders</a>
</li>
</ul>
</li>
<li id="li-manageinventory">
<a href="javascript:void(0)" class="has-sub7 open-dropdown">
<i class="fa fa-table" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Inventory</span>
</a>
<ul class="sub-nav7" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-sliders-h"></span> Adjust Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck-loading"></span> Receive Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-dolly"></span> Ship Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-map-marked-alt"></span> Locations</a>
</li>
</ul>
</li>
<li id="li-orderdownload">
<a href="#">
<i class="fa fa-download" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Download Orders</span>
</a>
</li>
<li id="li-tracking">
<a href="javascript:void(0)" class="has-sub2 open-dropdown">
<i class="fas fa-shipping-fast" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Tracking</span>
</a>
<ul class="sub-nav2" style="display: none;">
<li id="li-markorderassent" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck"></span> Mark Order as Sent</a>
</li>
<li id="li-downloatrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-down"></span> Download Trackings</a>
</li>
<li id="li-uploadtrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-up"></span> Upload Trackings</a>
</li>
</ul>
</li>
<li id="labels">
<a href="javascript:void(0)" class="has-sub4 open-dropdown">
<i class="fas fa-tags"></i>
<span class='sidebar-menu-text'>Labels</span>
</a>
<ul class="sub-nav4" style="display: none;">
<li id="li-createlabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tag"></span> Create Labels</a>
</li>
<li id="li-morelabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tags"></span> More Labels (template)</a>
</li>
</ul>
</li>
<li id="refunds">
<a href="#">
<i class="fas fa-money-bill-wave"></i>
<span class='sidebar-menu-text'>Refunds</span>
</a>
</li>
<li id="manageadm">
<a href="javascript:void(0)" class="has-sub6 open-dropdown">
<i class="fas fa-users-cog" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Admin</span>
</a>
<ul class="sub-nav6" style="display: none;">
<li id="li-usermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-user-cog"></span> User Management</a>
</li>
<li id="li-packermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-toolbox"></span> Packer Management</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

Your code is have a lot of reusable code Try this.
$(document).ready(function() {
"use strict"; // Start of use strict
$('.show-sidebar').on('click', function() {
$('#sidebar').toggleClass('collapse-sidebar');
$('#layout-admin').toggleClass('collapse-sidebar');
});
$('li a.has-sub').on('click', function() {
// For toggle its own li
$(this).toggleClass('open-dropdown');
$(this).parent().find('.sub-nav').slideToggle("slow");
// For other li
$(this).parent().siblings().children('a.has-sub').removeClass('open-dropdown');
$(this).parent().siblings().children('ul.sub-nav').slideUp("slow");
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
body {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
/*============================
Header
============================*/
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
ul li a .icon {
height: 40px;
width: 40px;
margin-right: 13px;
background: #ffffff1a;
display: flex;
justify-content: center;
text-align: center;
border-radius: 50%;
}
ul li a .icon span {
line-height: 40px;
font-size: 20px;
color: #b0b3b8;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
span.field-requried {
color: red;
}
.hide {
display: none;
}
#sidebar {
min-width: 250px;
max-width: 250px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-image: linear-gradient(to bottom, #000, #333);
transition: all 0.3s;
position: fixed;
top: 0;
height: 100vh;
}
#sidebar .sidebar-header {
padding: 15px 5px;
text-align: center;
height: 60px;
}
#sidebar .sidebar-header img {
width: 100px;
height: auto;
vertical-align: middle;
}
#sidebar ul.list-unstyled li {
margin-bottom: 10px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.1px;
display: block;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
position: relative;
}
#sidebar ul.list-unstyled li a.has-sub::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub2::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub3::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub4::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub5::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub6::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub7::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub8::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub2.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub3.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub4.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub5.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub6.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub7.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub8.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
text-align: center;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li:hover,
#sidebar ul.list-unstyled li.active {
background-color: rgba(255, 255, 255, 0.15);
}
#sidebar.collapse-sidebar {
min-width: 50px;
max-width: 50px;
text-align: center;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 40px;
}
#sidebar ul.list-unstyled {
padding: 0;
margin: 0;
list-style: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#layout-admin {
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
width: calc(100% - 50px);
min-height: 100vh;
transition: all 0.3s;
background-color: #f5f7f9;
}
#layout-admin .header {
height: 60px;
background-color: rgb(232, 2, 21);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 0 15px;
position: sticky;
z-index: 10;
top: 0;
width: 100%;
}
#layout-admin .header .header-left {
font-size: 0;
}
#layout-admin .header .header-right>div {
display: inline-block;
}
#layout-admin .header .header-right a {
font-size: 28px;
color: #fff;
}
#username {
font-size: 20px;
vertical-align: middle;
padding-bottom: 10px;
margin-right: 10px;
}
#layout-admin .header .header-right .setting {
margin-right: 40px;
}
#layout-admin .header .header-left button.show-sidebar {
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
/*-webkit-text-stroke: 1.5px white;*/
display: inline-block;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#layout-admin .header .header-left .logo {
display: inline-block;
vertical-align: middle;
}
#layout-admin .header .header-left .title {
display: inline-block;
vertical-align: middle;
font-size: 22px;
font-weight: 600;
color: #fff;
}
#layout-admin .header .header-left .title span {
font-weight: normal;
}
#layout-admin .content-admin {
padding: 20px;
}
#layout-admin .content-admin .title-content {
font-size: 20px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 30px;
}
#layout-admin.collapse-sidebar {
width: calc(100% - 250px);
transform: translate3d(250px, 0, 0);
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
}
.sub-nav,
.sub-nav2,
.sub-nav3,
.sub-nav4,
.sub-nav5,
.sub-nav6,
.sub-nav7,
.sub-nav8 {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.sub-nav li,
.sub-nav2 li,
.sub-nav3 li,
.sub-nav4 li,
.sub-nav5 li,
.sub-nav6 li,
.sub-nav7 li,
.sub-nav8 li {
font-size: 14px;
color: #fff;
list-style: none;
padding: 8px 15px 8px 30px;
}
#sidebarCollapse-mobile {
display: none;
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#media (max-width: 767px) {
#sidebar {
min-width: 0px;
max-width: 0px;
text-align: center;
}
#sidebar.collapse-sidebar {
min-width: 250px;
max-width: 250px;
text-align: left;
z-index: 1;
}
#sidebar .sidebar-header img {
width: 40px;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 100px;
}
#sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
}
#sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: inline-block;
}
*#layout-admin {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
width: calc(100% - 0px);
}
#layout-admin.collapse-sidebar {
width: calc(100% - 0px);
transform: translate3d(0px, 0, 0);
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
}
#layout-admin .header .header-left .title {
font-size: 16px;
}
#layout-admin .header .header-right a {
font-size: 22px;
}
#username {
font-size: 14px;
}
#sidebar.collapse-sidebar #sidebarCollapse-mobile {
display: inline-block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<nav id="sidebar">
<!--------------------- Sidebar header ---------------------------->
<div class="sidebar-header">
<img src="/common/images/logo.svg" alt="logo">
<button type="button" id="sidebarCollapse-mobile" class="show-sidebar">
<i class="fa fa-bars"></i>
</button>
</div>
<!--------------------- Sidebar menu ---------------------------->
<ul class="list-unstyled nav-links">
<li class="active">
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Home</span>
</a>
</li>
<li id="li-pendingorders">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-box-open" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pending Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-collectorders" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-crosshairs"></span> Collect orders</a>
</li>
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-box-open"></span> Partial collect</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-warehouse"></span> Warehouse collect</a>
</li>
<li id="li-outofstock" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-surprise"></span> Out of Stock</a>
</li>
<li id="li-ordered" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-thumbtack "></span> Ordered</a>
</li>
<li id="li-rts" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-recycle"></span> RTS</a>
</li>
<li id="li-awaitinglist" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-pause-circle"></span> Awaiting List</a>
</li>
</ul>
</li>
<li id="li-manageorders">
<a href="javascript:void(0)" class="has-sub">
<i class="fa fa-tasks" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-eye"></span> View Order</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-plus"></span> Create Order</a>
</li>
</ul>
</li>
<li id="li-packorders">
<a href="javascript:void(0)" class="has-sub">
<i class="fa fa-tape" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pack Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tape"></span> Pack Orders</a>
</li>
</ul>
</li>
<li id="li-manageinventory">
<a href="javascript:void(0)" class="has-sub">
<i class="fa fa-table" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Inventory</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-sliders-h"></span> Adjust Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck-loading"></span> Receive Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-dolly"></span> Ship Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-map-marked-alt"></span> Locations</a>
</li>
</ul>
</li>
<li id="li-orderdownload">
<a href="#">
<i class="fa fa-download" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Download Orders</span>
</a>
</li>
<li id="li-tracking">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-shipping-fast" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Tracking</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-markorderassent" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck"></span> Mark Order as Sent</a>
</li>
<li id="li-downloatrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-down"></span> Download Trackings</a>
</li>
<li id="li-uploadtrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-up"></span> Upload Trackings</a>
</li>
</ul>
</li>
<li id="labels">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-tags"></i>
<span class='sidebar-menu-text'>Labels</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-createlabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tag"></span> Create Labels</a>
</li>
<li id="li-morelabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tags"></span> More Labels (template)</a>
</li>
</ul>
</li>
<li id="refunds">
<a href="#">
<i class="fas fa-money-bill-wave"></i>
<span class='sidebar-menu-text'>Refunds</span>
</a>
</li>
<li id="manageadm">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-users-cog" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Admin</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-usermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-user-cog"></span> User Management</a>
</li>
<li id="li-packermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-toolbox"></span> Packer Management</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

Sidenav animation with smooth effect

I need to make a side navigation menu.
What I have so far:
function toggle() {
document
.querySelector('.nuxt-link-exact-active')
.classList.remove('nuxt-link-exact-active')
event.target.classList.add('nuxt-link-exact-active')
}
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active" onclick="toggle()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
The look I need, but I haven't been successful:
In addition to this look, I need effects when navigating between items, but I have no idea how to do them, here are some examples of smooth effects I would like:
https://dribbble.com/shots/5357786-Desktop-Messenger-Spaces-Animation

Try this
function toggle() {
document
.querySelector('.nuxt-link-exact-active')
.classList.remove('nuxt-link-exact-active')
event.target.classList.add('nuxt-link-exact-active')
}
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
transition: width 300ms;
width: 120px;
float: right;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position:relative;
z-index:9999;
transition:200ms;
width: 160px;
}
nav ul li .nav-item:before{
position:absolute;
top: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 54% 0 40% 0;
content:'';
z-index:-1;
transition: 300ms;
transition-timing-function: ease-in-out;
}
nav ul li .nav-item.nuxt-link-exact-active:before,nav ul li .nav-item.nuxt-link-exact-active:after{
box-shadow: 15px 15px 0 0 #000;
transition: 300ms;
transition-timing-function: ease-in-out;
}
nav ul li .nav-item:after{
position:absolute;
bottom: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 0 0 54% 40%;
content:'';
transform:rotate(270deg);
z-index:-1;
}
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active" onclick="toggle()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
You can change width size according to your case.

I make style now . later add animation smooth..
<style type="text/css">
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
transition: width 200ms;
width: 160px;
float: right;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position:relative;
z-index:9999;
}
nav ul li:first-child .nav-item.nuxt-link-exact-active.tobottom{
animation: fadeInbottomsmall 1s ease-in-out;
}
nav ul li:last-child .nav-item.nuxt-link-exact-active.totop{
animation: fadeIntopsmall 1s ease-in-out;
}
nav ul li .nav-item.nuxt-link-exact-active.totop{
animation: fadeIntop 1s ease-in-out;
}
nav ul li .nav-item.nuxt-link-exact-active.tobottom{
animation: fadeInbottom 1s ease-in-out;
}
nav ul li .nav-item:before{
position:absolute;
top: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 54% 0 40% 0;
content:'';
z-index:9999999;
}
nav ul li .nav-item.nuxt-link-exact-active:before,nav ul li .nav-item.nuxt-link-exact-active:after{
box-shadow: 15px 15px 0 0 #000;
}
nav ul li .nav-item:after{
position:absolute;
bottom: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 0 0 54% 40%;
content:'';
transform:rotate(270deg);
z-index:9999999999;
}
#keyframes fadeInbottom{
0%{
transform:translateY(-67px);
}100%{
transform:translateY(0px);
}
}
#keyframes fadeIntop{
0%{
transform:translateY(0px);
}100%{
transform:translateY(-67px);
}
}
#keyframes fadeInbottomsmall{
0%{
transform:translateY(-33px}!important;
}100%{
transform:translateY(0px) !important;
}
}
#keyframes fadeIntopsmall{
0%{
transform:translateY(0px);
}100%{
transform:translateY(-33px);
}
}
</style>
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active tobottom" id="menu1" onclick="anim()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="anim()" id="menu2">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="anim()" id="menu3">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="anim()" id="menu4">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
<script type="text/javascript">
function anim() {
var all = document.querySelectorAll('.nav-item');
var prev,prevElement,nxtElement,nxt,dist;
for (var i = 0; i < all.length; i++) {
nxtElement = event.target;
// console.log(prevElement)
if(all[i].classList.contains('nuxt-link-exact-active')){
prevElement = all[i];
prev = i + 1;
prevElement.classList.remove('nuxt-link-exact-active');
// nxtElement = prevElement[i];
}
if(all[i]==nxtElement){
nxt = i+1;
}
}
console.log(prev);
console.log(nxt);
if(nxt > prev){
nxtElement.classList.add('nuxt-link-exact-active','tobottom');
nxtElement.classList.remove('totop');
prevElement.classList.remove('tobottom',"totop");
dist=(nxt-prev)*-67;
}else{
nxtElement.classList.add('nuxt-link-exact-active','totop');
nxtElement.classList.remove('tobottom');
prevElement.classList.remove('tobottom',"totop");
dist=((prev-nxt)-1)*-67;
}
var style = document.createElement('style');
// console.log(distance);
style.type = 'text/css';
var keyFrames = '\
#keyframes fadeInbottom {\
0% {\
transform:translateY('+dist+'px);\
}\
100% {\
transform:translateY(0);\
}\
};\
#keyframes fadeIntop {\
0% {\
transform:translateY(0px);\
}\
100% {\
transform:translateY('+dist+'px);\
}\
};';
style.innerHTML = keyFrames;
console.log(style.innerHTML);
document.head.appendChild(style);
}
</script>

I am not able to fix the mobile menu hamburger icon and home icon in same line alongwith the hover menu does not appear according to hamburger menu

Actually when i go on a mobile screen, my hamburger icon and home icon they both dont align on the same line despite the display been set to flex and content is justified with 'space-between'. Also the close button (times icon(font awesome)) which should appear on the top while hover is on, on the hamburger menu doesn't appear. please if someone can help, as this thing is hindering my project.
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/*********************************
*** Marque
*********************************/
.marquee {
background: #f2184f;
padding-top: 4px;
padding-bottom: 3px;
/*border: 1px;
border-left: 10px;
border-style: solid;
border-color: #FF5733 ;*/
}
.marquee a {
color: #fafafa;
text-decoration: none;
font-size: 18px;
line-height: 1.5;
font-weight: 400;
}
/*********************************
*** Logo Bar
*********************************/
#logo-bar {
background: #ffffff;
padding-top: 3px;
}
#logo-bar .logo {
display: flex;
align-items: center;
}
#logo-bar .logo img {
max-width: 280px;
}
#logo-bar .logo-2 img {
max-width: 200px;
margin-left: 70px;
}
#menu {
background: #202c45;
box-shadow: 0 5px 3px -3px;
position: relative;
z-index: 1;
}
#menu ul {
text-align: center;
margin-bottom: 0;
}
#menu ul li {
display: inline-block;
padding: 8px 20px;
}
#menu ul li:hover,
.active {
background-color: orange;
transition: ease-in .3s;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#menu ul li:hover a {
color: black;
transition: ease-in .3s;
}
#menu ul li ul {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul {
display: block;
margin-top: 10px;
margin-left: -20px;
z-index: 1;
padding: 10px;
}
#menu ul li ul li {
display: block;
}
#menu ul li ul li ul.nav-sub-sub-item {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul li:hover ul.nav-sub-sub-item {
width: 100%;
display: block;
margin-top: -35px;
margin-left: 150px;
z-index: 1;
padding: 10px;
}
#menu ul li ul li:hover {
background: #2a4563;
transition: ease-in .3s;
}
#menu ul li ul li:hover a {
color: #fff;
transition: ease-in .3s;
}
.mobile-menu {
display: none;
}
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
nav {
background: #202c45;
padding: 10px 20px;
box-shadow: 0 5px 3px -3px;
position: relative;
font-size: 20px;
z-index: 1;
display: flex;
justify-content: space-between;
overflow: hidden;
}
nav .home {
color: #fff;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #333;
display: inline-block;
padding: 1em 3em;
text-decoration: none;
border-bottom: 2px solid #fff;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
font-size: 16px;
}
nav ul li:hover {
color: orange;
}
nav ul li a:hover {
color: #ffffff;
}
/*styling open close button*/
.btn-open:after {
color: #fff;
content: "\f0c9";
font-family: "FontAwesome";
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.btn-open:hover:after {
color: #0066bf;
}
.btn-close:after {
color: #0066bf;
content: "\f00d";
z-index:99;
font-family: "FontAwesome";
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.btn-close:hover:after {
color: #fff;
}
/* overlay */
.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width:100%;
background: #f2184f;
overflow: auto;
z-index: 99;
}
.wrap {
color: pink;
text-align: center;
max-width: 60%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
border-bottom: 1px solid #575757;
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 24%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #ffffff;
display: block;
padding: 8px 0;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #f0f0f0;
background: #202c45;
}
.wrap ul.wrap-nav ul {
padding: 20px 0;
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
color: #ffffff;
}
.social {
font-size: 25px;
padding: 20px;
}
.social p {
margin: 0;
padding: 20px 0 5px 0;
line-height: 30px;
font-size: 13px;
}
.social p a {
color: black;
text-decoration: none;
margin: 0;
padding: 0;
}
.social-icon {
width: 80px;
height: 50px;
background: #e9e9e9;
color: #333;
display: inline-block;
margin: 0 20px;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.social-icon:hover {
background: #34B484;
color: #f0f0f0;
}
.social-icon i {
margin-top: 12px;
}
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
#media only screen and (max-width: 480px) {
.marquee{
width: 100%;
}
.mobile-menu {
width: 100%;
display: block;
text-align: center;
}
#logo-bar {
display: none;
}
#menu {
display: none;
}
/****** Imported Css *********/
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
.social {
color: #c1c1c1;
font-size: 25px;
padding: 15px 0;
}
.social-icon {
width: 100%;
height: 50px;
background: #fff;
color: #333;
display: block;
margin: 5px 0;
}
}
.content {
width: 100%;
margin-top: 200px;
font-size: 20px;
color: #333;
text-align: center;
}
#title{
min-height: 450px;
background: #eaeaea;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cache-control" content="no-cache" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Home Style Sheet -->
<link rel="stylesheet" href="css/style.css" />
<!-- Font Awesome JavaScript -->
<link href="https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville|Montserrat|Quicksand|Raleway|Slabo+27px&display=swap" rel="stylesheet">
<!-- Font Awesome JavaScript -->
<script src="https://kit.fontawesome.com/0412137e5c.js" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script/script.js' type="text/javascript"></script>
<title>The Global University</title>
</head>
<body>
<!-- Header -->
<!-- Marquee Starts -->
<div class="marquee">
<marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
<i class="fas fa-newspaper"></i> University will remain closed upto 30th May 2020 to avoid gathering & prevention of spreading Novel Corona Virus
</marquee>
</div>
<!-- Marquee Ends-->
<!-- Logo Bar Starts -->
<header class="header">
<div id="logo-bar">
<div class="container">
<div class="logo-bar">
<div class="row">
<div class="logo col-lg-6 col-md-6">
<a href="index.html">
<h1>Navbar LOGO</h1>
</a>
</div>
<div class="logo-2 col-lg-3 col-md-3">
<h1>Second LOGO</h1>
</div>
<div class="col-lg-3 col-md-3">
<button class="btn btn-sm btn-primary">Student Login</button> <button class="btn btn-sm btn-primary">Admin Login</button>
<h6><strong>Call Us:</strong> +91-234-234460</h6>
<h6><Strong>Email Us:</Strong></h6>
<h6>info#theexample.com</h6>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu">
<div class="container">
<div class="mobile-menu-1">
<h1>First Logo</h1>
</div>
<div class="mobile-menu-2">
<h6><i class="fa fa-phone" aria-hidden="true"></i> +91-360-2277560/2142654554</h6>
<h6><i class="fa fa-envelope" aria-hidden="true"></i> info#theglobaluniversity.co.in</h6>
</div>
</div>
<div class="mobile-navbar2">
<nav>
<div><i class="home fas fa-home"></i></div>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>About
<ul>
<li>About Company</li>
<li>Designers</li>
<li>Developers</li>
<li>Pets</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Development</li>
<li>Apps</li>
<li>Graphic design</li>
<li>Branding</li>
</ul>
</li>
<li>Work
<ul>
<li>Web</li>
<li>Graphic</li>
<li>Apps</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Logo Bar Ends -->
<!-- Menu Bar Starts -->
<div id="menu">
<div class="container">
<ul>
<li class="active"><i class="fas fa-home"></i> </li>
<li class="nav-item">About Us
<ul>
<li class="nav-sub-item">About TGU</li>
<li class="nav-sub-item">TGU Vision</li>
<li class="nav-sub-item">TGU Mission</li>
<li class="nav-sub-item">Message</li>
<li class="nav-sub-item">Approval
<ul class="nav-sub-sub-item">
<li class="nav-sub-item">TGU Act</li>
<li class="nav-sub-item">UGC List</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">Academic
<ul>
<li class="nav-sub-item">Department</li>
<li class="nav-sub-item">Faculty</li>
<li class="nav-sub-item">Syllabus</li>
</ul>
</li>
<li class="nav-item">Admission
<ul>
<li class="nav-sub-item">Procedure</li>
<li class="nav-sub-item">Apply Online</li>
<li class="nav-sub-item">Scholarship</li>
<li class="nav-sub-item">Download Form</li>
<li class="nav-sub-item">Merit</li>
</ul>
</li>
<li class="nav-item">Examination
<ul>
<li class="nav-sub-item">Exam Form</li>
<li class="nav-sub-item">Notice</li>
<li class="nav-sub-item">Admit Card</li>
<li class="nav-sub-item">Verification</li>
</ul>
</li>
<li class="nav-item">Research
<ul>
<li class="nav-sub-item">Admission Procedure</li>
<li class="nav-sub-item">Ph.D/M.Phil Entrance Form</li>
<li class="nav-sub-item">Ordinance For Research</li>
<li class="nav-sub-item">Guide Application Form</li>
<li class="nav-sub-item">Guide Consent Form</li>
<li class="nav-sub-item">Progress Report Form</li>
<li class="nav-sub-item">Synopsis Format</li>
<li class="nav-sub-item">Syllabus of Coursework</li>
<li class="nav-sub-item">Scholar Assignment</li>
<li class="nav-sub-item">Pre Ph.D Course Work</li>
<li class="nav-sub-item">Thesis Format</li>
</ul>
</li>
<li class="nav-item">Facilities
<ul>
<li class="nav-sub-item">Library</li>
<li class="nav-sub-item">WiFi Campus</li>
<li class="nav-sub-item">Hostel & Cafe</li>
<li class="nav-sub-item">Digitalization</li>
<li class="nav-sub-item">First Aid</li>
<li class="nav-sub-item">Sports</li>
</ul>
</li>
<li>Contact</li>
<li>
<div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
</li>
</ul>
</div>
</div>
</header>
<!-- Menu Bar Ends -->
<!-- Title Starts -->
<div id="title">
</div>

I added the classes button-home and button-menu to the icons for more specific and explaining selectors.
<nav>
<div class="button-home"><i class="home fas fa-home"></i></div>
<div class="button button-menu">
<a class="btn-open" href="#"></a>
</div>
</nav>
To accomplish the requested position, you can use:
#media only screen and (max-width: 480px) {
.button-home {
display: inline-block;
float: left;
}
.button-menu {
display: inline-block;
float: right;
}
}
Your close button is not visible, because it's not part of the overlay and therefore the overlay is hiding it. I added it to the overlay:
<div class="overlay">
<div class="wrap">
<a class="btn-close" href="#"></a>
<ul class="wrap-nav">
...
That way your class toggles are not necessary anymore, so I simplified your js and specified the btn-open selector a little bit more:
$(document).ready(function() {
$(".button-menu .btn-open").click(function() {
$(".overlay").fadeToggle(200);
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
open = false;
});
Now you only need to make your close button a little nicer.
Here is the full code:
$(document).ready(function() {
$(".button-menu .btn-open").click(function() {
$(".overlay").fadeToggle(200);
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
open = false;
});
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/*********************************
*** Marque
*********************************/
.marquee {
background: #f2184f;
padding-top: 4px;
padding-bottom: 3px;
/*border: 1px;
border-left: 10px;
border-style: solid;
border-color: #FF5733 ;*/
}
.marquee a {
color: #fafafa;
text-decoration: none;
font-size: 18px;
line-height: 1.5;
font-weight: 400;
}
/*********************************
*** Logo Bar
*********************************/
#logo-bar {
background: #ffffff;
padding-top: 3px;
}
#logo-bar .logo {
display: flex;
align-items: center;
}
#logo-bar .logo img {
max-width: 280px;
}
#logo-bar .logo-2 img {
max-width: 200px;
margin-left: 70px;
}
#menu {
background: #202c45;
box-shadow: 0 5px 3px -3px;
position: relative;
z-index: 1;
}
#menu ul {
text-align: center;
margin-bottom: 0;
}
#menu ul li {
display: inline-block;
padding: 8px 20px;
}
#menu ul li:hover,
.active {
background-color: orange;
transition: ease-in .3s;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#menu ul li:hover a {
color: black;
transition: ease-in .3s;
}
#menu ul li ul {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul {
display: block;
margin-top: 10px;
margin-left: -20px;
z-index: 1;
padding: 10px;
}
#menu ul li ul li {
display: block;
}
#menu ul li ul li ul.nav-sub-sub-item {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul li:hover ul.nav-sub-sub-item {
width: 100%;
display: block;
margin-top: -35px;
margin-left: 150px;
z-index: 1;
padding: 10px;
}
#menu ul li ul li:hover {
background: #2a4563;
transition: ease-in .3s;
}
#menu ul li ul li:hover a {
color: #fff;
transition: ease-in .3s;
}
.mobile-menu {
display: none;
}
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
nav {
background: #202c45;
padding: 10px 20px;
box-shadow: 0 5px 3px -3px;
position: relative;
font-size: 20px;
z-index: 1;
display: flex;
justify-content: space-between;
overflow: hidden;
}
nav .home {
color: #fff;
}
nav ul {
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #333;
display: inline-block;
padding: 1em 3em;
text-decoration: none;
border-bottom: 2px solid #fff;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
font-size: 16px;
}
nav ul li:hover {
color: orange;
}
nav ul li a:hover {
color: #ffffff;
}
/*styling open close button*/
.btn-open:after {
color: #fff;
content: "\f0c9";
font-family: "FontAwesome";
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.btn-open:hover:after {
color: #0066bf;
}
.btn-close:after {
color: #0066bf;
content: "\f00d";
z-index: 99;
font-family: "FontAwesome";
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.btn-close:hover:after {
color: #fff;
}
/* overlay */
.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #f2184f;
overflow: auto;
z-index: 99;
}
.wrap {
color: pink;
text-align: center;
max-width: 60%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
border-bottom: 1px solid #575757;
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 24%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #ffffff;
display: block;
padding: 8px 0;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #f0f0f0;
background: #202c45;
}
.wrap ul.wrap-nav ul {
padding: 20px 0;
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
color: #ffffff;
}
.social {
font-size: 25px;
padding: 20px;
}
.social p {
margin: 0;
padding: 20px 0 5px 0;
line-height: 30px;
font-size: 13px;
}
.social p a {
color: black;
text-decoration: none;
margin: 0;
padding: 0;
}
.social-icon {
width: 80px;
height: 50px;
background: #e9e9e9;
color: #333;
display: inline-block;
margin: 0 20px;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.social-icon:hover {
background: #34B484;
color: #f0f0f0;
}
.social-icon i {
margin-top: 12px;
}
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
/** Imported CSS outside media queries ****/
#media only screen and (max-width: 480px) {
.marquee {
width: 100%;
}
.mobile-menu {
width: 100%;
display: block;
text-align: center;
}
#logo-bar {
display: none;
}
#menu {
display: none;
}
/****** Imported Css *********/
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
.social {
color: #c1c1c1;
font-size: 25px;
padding: 15px 0;
}
.social-icon {
width: 100%;
height: 50px;
background: #fff;
color: #333;
display: block;
margin: 5px 0;
}
}
.content {
width: 100%;
margin-top: 200px;
font-size: 20px;
color: #333;
text-align: center;
}
#title {
min-height: 450px;
background: #eaeaea;
}
/* MODIFICATIONS */
#media only screen and (max-width: 480px) {
.button-home {
display: inline-block;
float: left;
}
.button-menu {
display: inline-block;
float: right;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cache-control" content="no-cache" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Home Style Sheet -->
<link rel="stylesheet" href="css/style.css" />
<!-- Font Awesome JavaScript -->
<link href="https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville|Montserrat|Quicksand|Raleway|Slabo+27px&display=swap" rel="stylesheet">
<!-- Font Awesome JavaScript -->
<script src="https://kit.fontawesome.com/0412137e5c.js" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script/script.js' type="text/javascript"></script>
<title>The Global University</title>
</head>
<body>
<!-- Header -->
<!-- Marquee Starts -->
<div class="marquee">
<marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
<i class="fas fa-newspaper"></i> University will remain closed upto 30th May 2020 to avoid gathering & prevention of spreading Novel Corona Virus
</marquee>
</div>
<!-- Marquee Ends-->
<!-- Logo Bar Starts -->
<header class="header">
<div id="logo-bar">
<div class="container">
<div class="logo-bar">
<div class="row">
<div class="logo col-lg-6 col-md-6">
<a href="index.html">
<h1>Navbar LOGO</h1>
</a>
</div>
<div class="logo-2 col-lg-3 col-md-3">
<h1>Second LOGO</h1>
</div>
<div class="col-lg-3 col-md-3">
<button class="btn btn-sm btn-primary">Student Login</button> <button class="btn btn-sm btn-primary">Admin Login</button>
<h6><strong>Call Us:</strong> +91-234-234460</h6>
<h6>
<Strong>Email Us:</Strong>
</h6>
<h6>info#theexample.com</h6>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu">
<div class="container">
<div class="mobile-menu-1">
<h1>First Logo</h1>
</div>
<div class="mobile-menu-2">
<h6><i class="fa fa-phone" aria-hidden="true"></i> +91-360-2277560/2142654554</h6>
<h6><i class="fa fa-envelope" aria-hidden="true"></i> info#theglobaluniversity.co.in</h6>
</div>
</div>
<div class="mobile-navbar2">
<nav>
<div class="button-home"><i class="home fas fa-home"></i></div>
<div class="button button-menu">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<a class="btn-close" href="#"></a>
<ul class="wrap-nav">
<li>About
<ul>
<li>About Company</li>
<li>Designers</li>
<li>Developers</li>
<li>Pets</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Development</li>
<li>Apps</li>
<li>Graphic design</li>
<li>Branding</li>
</ul>
</li>
<li>Work
<ul>
<li>Web</li>
<li>Graphic</li>
<li>Apps</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Logo Bar Ends -->
<!-- Menu Bar Starts -->
<div id="menu">
<div class="container">
<ul>
<li class="active"><i class="fas fa-home"></i> </li>
<li class="nav-item">About Us
<ul>
<li class="nav-sub-item">About TGU</li>
<li class="nav-sub-item">TGU Vision</li>
<li class="nav-sub-item">TGU Mission</li>
<li class="nav-sub-item">Message</li>
<li class="nav-sub-item">Approval
<ul class="nav-sub-sub-item">
<li class="nav-sub-item">TGU Act</li>
<li class="nav-sub-item">UGC List</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">Academic
<ul>
<li class="nav-sub-item">Department</li>
<li class="nav-sub-item">Faculty</li>
<li class="nav-sub-item">Syllabus</li>
</ul>
</li>
<li class="nav-item">Admission
<ul>
<li class="nav-sub-item">Procedure</li>
<li class="nav-sub-item">Apply Online</li>
<li class="nav-sub-item">Scholarship</li>
<li class="nav-sub-item">Download Form</li>
<li class="nav-sub-item">Merit</li>
</ul>
</li>
<li class="nav-item">Examination
<ul>
<li class="nav-sub-item">Exam Form</li>
<li class="nav-sub-item">Notice</li>
<li class="nav-sub-item">Admit Card</li>
<li class="nav-sub-item">Verification</li>
</ul>
</li>
<li class="nav-item">Research
<ul>
<li class="nav-sub-item">Admission Procedure</li>
<li class="nav-sub-item">Ph.D/M.Phil Entrance Form</li>
<li class="nav-sub-item">Ordinance For Research</li>
<li class="nav-sub-item">Guide Application Form</li>
<li class="nav-sub-item">Guide Consent Form</li>
<li class="nav-sub-item">Progress Report Form</li>
<li class="nav-sub-item">Synopsis Format</li>
<li class="nav-sub-item">Syllabus of Coursework</li>
<li class="nav-sub-item">Scholar Assignment</li>
<li class="nav-sub-item">Pre Ph.D Course Work</li>
<li class="nav-sub-item">Thesis Format</li>
</ul>
</li>
<li class="nav-item">Facilities
<ul>
<li class="nav-sub-item">Library</li>
<li class="nav-sub-item">WiFi Campus</li>
<li class="nav-sub-item">Hostel & Cafe</li>
<li class="nav-sub-item">Digitalization</li>
<li class="nav-sub-item">First Aid</li>
<li class="nav-sub-item">Sports</li>
</ul>
</li>
<li>Contact</li>
<li>
<div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
</li>
</ul>
</div>
</div>
</header>
<!-- Menu Bar Ends -->
<!-- Title Starts -->
<div id="title">
</div>

How can I hide and show submenu?

I am trying to create a jQuery sliding navigation and I stumble into some problem. I don't know how to slide/hide and display my submenu.
Here's the HTML:
<div class="content">
<div class="page-content">
</div>
<div class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<div class="nav">
<ul id="nav" >
<li><i class="fa fa-home"></i><span>Home</span></li>
<li><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li><i class="fa fa-gears"></i><span>Contact</span></li>
</ul>
</div>
</div>
</div>
Please help!

There's an error in your JSFiddle concerning your toggle = !toggle. However, why not just use the $('#elementId').toggle()? It's JQuery, and it simplifies this code massively. See here for my JSFiddle, and below for my code.
HTML:
<nav class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<ul id="nav" class="nav">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>profile.1</li>
<li>profile.2</li>
<li>profile.3</li>
</ul>
<li><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>About.1</li>
<li>About.2</li>
<li>About.3</li>
</ul>
</li>
<li><i class="fa fa-history"></i>Blog</li>
<li><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
<li>Deals.1</li>
<li>Deals.2</li>
<li>Deals.3</li>
</ul>
</li>
</ul>
</nav>
CSS (I took a lot of this from the original Fiddle):
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.expandNav {
float: right;
padding-top: 4px;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 26px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa {
margin: 0px 17px 0px 0px;
}
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo {
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
and JS (This was just to toggle the icons):
$('#nav a').click(function() {
$(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});

try the following
css:
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
js:
$('.nav a').click(function(){
$(this).closest('li').find('ul').toggleClass('disp');
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus');
});
http://jsfiddle.net/2tz4usnL/3/

Here is a Working Fiddle
Add this Scripts
$('#nav a .fa.fa-plus').on('click',function(){
$(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons
$(this).closest('li').find('ul').toggleClass('active');
});
And this CSS
#nav li ul {
/*opacity: 0;*/ /* changed */
height: auto; /* changed */
display: none; /* added */
}
#nav li ul.active { /* added */
display:block;
}