Mobile Chrome bar taking up space from 100% height css

Mobile Chrome bar taking up space from 100% height css - javascript

Im facing a rather famous problem but cant seem to find any solution in my case. So I have this collapsible scrollable bar implemented on bootstrap but the problem is when i try to scroll this bar on mobile, due to the search bar taking a little space from the 100% height set for the sidebar, the scrollbar does not reach the end of the div therefore clipping the content. I want to know a way to exclude the bar from the height or like a workaround that would fix this issue.
Here's my html and css for the sidebar: https://jsfiddle.net/fq5b3m1w/
html,
body {
background: #f8f8f8;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
padding-top: 50px;
}
#wrapper.toggled {
// padding-left: 100px;
}
#sidebar-wrapper {
z-index: 99999;
position: fixed;
left: 100px;
width: 0;
height: calc(100%);
margin-left: -100px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #fcfcfc;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 100px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 5px;
background: #f8f8f8;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -100px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
// text-indent: 20px;
// line-height: 25px;
text-align: center;
margin: 0 0;
}
.sidebar-nav li .fa {
padding-top: 10px;
display: block;
// color: rgba(2,136,209,1);
}
.sidebar-nav li.active a {
// color: #fff;
background: rgba(2, 136, 209, .2);
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
transition: all .2s;
font-size: 14px;
padding: 8px 0;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:992px) {
#wrapper {
padding-left: 100px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 100px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}

First Method:
A simple solution would be adding a border to offset the extra space on top
Remove:
#wrapper {
padding-top: 50px;
}
Add:
#sidebar-wrapper {
border-top: 50px solid white;
}
Second Method:
Creating a top a header and a content divs, where you specify the header with height:10% and content height:90%. This way the scrollbar will always fit into the screen regardless what size you are in.
Third Method:
Using display:flex where you arrange both header and content in a column using flex-direction: column;. Then specify the header using flex-basis:50px and content flex-grow:1 and flex-basis:auto; this way the content adjust the height itself automatically.

I don't know if this is what you want but you could try this.
$("#menu-toggle").click(function(e) {
e.preventDefault();
var height = $(window).height()-50;
$('#sidebar-wrapper').css('height',height+'px');
$("#wrapper").toggleClass("toggled");
});
html,
body {
background: #f8f8f8;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
padding-top: 50px;
}
#wrapper.toggled {
// padding-left: 100px;
}
#sidebar-wrapper {
z-index: 99999;
position: fixed;
left: 100px;
width: 0;
margin-left: -100px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #fcfcfc;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 100px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 5px;
background: #f8f8f8;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -100px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
// text-indent: 20px;
// line-height: 25px;
text-align: center;
margin: 0 0;
}
.sidebar-nav li .fa {
padding-top: 10px;
display: block;
// color: rgba(2,136,209,1);
}
.sidebar-nav li.active a {
// color: #fff;
background: rgba(2, 136, 209, .2);
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
transition: all .2s;
font-size: 14px;
padding: 8px 0;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:992px) {
#wrapper {
padding-left: 100px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 100px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper" class="affix">
<ul class="sidebar-nav">
<li class="active">
<a href="/">
<i class="fa fa-home fa-2x"></i> Home
</a>
</li>
<li class="">
<a href="/companies">
<i class="fa fa-building fa-2x"></i> Companies
</a>
</li>
<li class="">
<a href="/people">
<i class="fa fa-users fa-2x"></i> People
</a>
</li>
<li>
<a href="/">
<i class="fa fa-handshake-o fa-2x"></i> Investors
</a>
</li>
<li>
<a href="/">
<i class="fa fa-money fa-2x"></i> Funding Rounds
</a>
</li>
<li>
<a href="/">
<i class="fa fa-users fa-2x"></i> Acquisitions
</a>
</li>
<li>
<a href="/">
<i class="fa fa-graduation-cap fa-2x"></i> Schools
</a>
</li>
<li>
<a href="/">
<i class="fa fa-calendar fa-2x"></i> Events
</a>
</li>
<li>
<a href="/">
<i class="fa fa-calendar fa-2x"></i> Login/Signup
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
content
<button id="menu-toggle">
menu
</button>
</button>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Updated Fiddle.

Related

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).

Struggling to add drop down effect to navbar

I've been struggling to get my navbar on mobile to transition downwards when the hamburger menu is pressed. I have added CSS and looked into things but I'm struggling to understand why it isn't working.
I'd like the navbar to drop down and the opacity of the links to change.
I have used an answer below to adapt my code but I am still encountering difficulties.
Thanks in advance.
function myFunction() {
var x = document.getElementById("myLinks");
if(x.className.indexOf('easein') > -1) {
x.classList.remove('easein');
x.classList.add('easeout')
}
else {
x.classList.add('easein');
x.classList.remove('easeout')
}
}
.topnav {
display: block;
background-color: #fff;
box-shadow: 1px 1px 16px 2px red;
position: fixed;
z-index: 45;
right: 0;
width: 100vw;
}
.topnav a#home {
left: 0;
}
.topnav .myLinks {
height: 0;
opacity: 0;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.topnav a {
color: #0000a0;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: 700;
display: block;
}
.topnav a.icon {
background: #fff;
display: block;
position: absolute;
right: 0;
top: 4vw;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.fa {
color: red;
}
#myLinks a{
left: -10%;
border-radius: 0;
width: 100vw;
margin: 0;
}
.topnav .myLinks.easein {
height:500px;
opacity: 1;
}
.topnav .myLinks.easeout {
height:0px;
opacity: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
Logo
<div id="myLinks" class="myLinks">
Portal
Feedback
Logout
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

The issue is you have set the CSS attribute display to have the animation, I suggest that you change it to opacity and height, also note that I used classList to add/remove class, here is an implementation of what you are looking for:
function myFunction() {
var x = document.getElementById("myLinks");
if(x.className.indexOf('easein') > -1) {
x.classList.remove('easein');
x.classList.add('easeout')
}
else {
x.classList.add('easein');
x.classList.remove('easeout')
}
}
.topnav {
background-color: #fff;
box-shadow: 1px 1px 16px 2px red;
position: fixed;
z-index: 20;
right: 0;
width: 100vw;
}
.topnav a#home {
left: 0;
}
.topnav .myLinks {
height: 0;
opacity: 0;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.topnav a {
color: #0000a0;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: #fff;
display: block;
position: absolute;
right: 0;
top: 4vw;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.fa {
color: red;
}
.myLinks a{
width: 100vw;
}
.topnav .myLinks.easein {
height:500px;
opacity: 1;
}
.topnav .myLinks.easeout {
height:0px;
opacity: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
Logo
<div id="myLinks" class="myLinks">
Portal
Feedback
Logout
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Fullscreen overlay opens on page load

I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
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 {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
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 {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

How to expand toggle sidebar more

I'm using the following HTML + CSS for a sidebar on a asp.net web page. I got this from a template. Currently when I toggle the sidebar, it comes out messed up. The text and icon are not in the same line. I think it is running out of space. How can i change it so that when it is toggled, it opens up more? Thank you. I'm really new to CSS and bootstrap. Thank you.
<div id="wrapper">
<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="sidebar">
<li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li>
<li><a>Dashboard<span class="sub_icon glyphicon glyphicon-dashboard"></span></a></li>
<li><a>Reports<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Configuration<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Settings<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content inset">
<div class="row">
<div>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
margin-right:0px;
}
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-left: -150px;
left: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: left;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: left;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
}
#main_icon
{
float:right;
padding-right: 30px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 32px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
#media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
.glyphicon{
font-size: 19px;
}
}
JS:
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});

You'll just need to make some updates to the CSS to make it wider. These are the selectors I made changes to. You can see the working version in the Fiddle below.
#sidebar-wrapper {
margin-left: -242px;
left: 70px;
width: 250px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
#wrapper.active #sidebar-wrapper {
left: 66px;
}
.sidebar-nav {
display: block;
float: left;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
#media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 242px;
/*width: 150px; You can remove this */
transition: all .4s ease 0s;
}
}
Check out this Fiddle

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;
}

We Keep Coding

JavaScript is the programming language of the Web.

Mobile Chrome bar taking up space from 100% height css - javascript

Related

Spacing problem between Header and Sidebar

Struggling to add drop down effect to navbar

Fullscreen overlay opens on page load

How to expand toggle sidebar more

How can I hide and show submenu?

Categories

Resources