Responsive Navbar Dropdown (Not Bootstrap) - javascript

I have this Navbar and it works perfectly in the original mode, and when the screen's width is less than 950px it displays the buttons one under another, but the problem is, dropdown button is also there, which is okay, but it opens the dropdown content somewhere on a totally wrong side. What I wish is to make the dropdown content appear under the dropdown button. Is there something wrong with my code? Any help will be appreciated. My code:
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
/* min-width: 160px;*/
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>


Add position:relative to nav ul li and give this css to dropdown
.dropdown-contentd{
width:100%;
}
.dropdown-contentd a{
text-align:center;
}
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
nav ul li{
position:relative
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
/* min-width: 160px;*/
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li{
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
.dropdown-contentd{
width:100%;
}
.dropdown-contentd a{
text-align:center;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>


Add position:relative to parent element #dropdownd. Then set position:absolute and top:value styles to child element .dropdown-contentd
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
/* add this */
#dropdownd {
position:relative
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
/* start: i changed here */
position: absolute;
top: 30px;
left: 0; right: 0; margin: 0 auto; /* this line optional...horizontal centering for absolute element */
min-width: 160px;max-width: 250px;
/* end */
background-color: royalblue;
color: #FFF;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

Related

Dropdown menu can't open in another browser

I have create sidebar menu with dropdown, dropdown menu is fine with browser that I used to develop website. But when I used another browser dropdown menu can't appear. Also notification menu can't show up when I hover on another browser.
Browser I used is Google Chrome
Here is Sidebar html
<li>Master Data
<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
<li> <i class="fa fa-user"></i> Data Supplier</li>
<li> <i class="fa fa-list"></i> Kategori RPC</li>
<li> <i class="fa fa-list"></i> List Part Alokasi</li>
<li> <i class="fa fa-laptop"></i> Daftar Hardware</li>
<li> <i class="fa fa-dollar"></i> Akun Transaksi</li>
<li> <i class="fa fa-pencil"></i> Business Note</li>
</ul>
</li>
Here is the CSS
/*
* ==========================================================
* SIDEBAR
* ==========================================================
*/
nav.side-navbar {
background: #fff;
min-width: 250px;
max-width: 250px;
color: #686a76;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
z-index: 9;
/*==== Sidebar Header ====*/
/*==== Sidebar Menu ====*/
/*==== Shrinked Sidebar ====*/
}
nav.side-navbar a {
color: inherit;
position: relative;
font-size: 0.9em;
}
nav.side-navbar a[data-toggle="collapse"]::before {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav.side-navbar a[aria-expanded="true"] {
background: #EEF5F9;
}
nav.side-navbar a[aria-expanded="true"]::before {
content: '\f107';
}
nav.side-navbar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav.side-navbar a .badge {
vertical-align: middle;
}
nav.side-navbar .sidebar-header {
padding: 30px 15px;
}
nav.side-navbar .avatar {
width: 55px;
height: 55px;
}
nav.side-navbar .title {
margin-left: 10px;
}
nav.side-navbar .title h1 {
color: #333;
}
nav.side-navbar .title p {
font-size: 0.9em;
font-weight: 200;
margin-bottom: 0;
color: #aaa;
}
nav.side-navbar span.heading {
text-transform: uppercase;
font-weight: 400;
margin-left: 20px;
color: #ccc;
font-size: 0.8em;
}
nav.side-navbar ul {
padding: 15px 0;
}
nav.side-navbar ul li {
/* submenu item active */
}
nav.side-navbar ul li a {
padding: 10px 15px;
text-decoration: none;
display: block;
font-weight: 300;
border-left: 4px solid transparent;
}
nav.side-navbar ul li a:hover {
background: #796AEE;
border-left: 4px solid #3b25e6;
color: #fff;
}
nav.side-navbar ul li li a {
padding-left: 50px;
background: #EEF5F9;
}
nav.side-navbar ul li.active > a {
background: #796AEE;
color: #fff;
border-left: 4px solid #3b25e6;
}
nav.side-navbar ul li.active > a:hover {
background: #796AEE;
}
nav.side-navbar ul li li.active > a {
background: #8e81f1;
}
nav.side-navbar ul li ul {
padding: 0;
}
nav.side-navbar.shrinked {
min-width: 90px;
max-width: 90px;
text-align: center;
}
nav.side-navbar.shrinked span.heading {
margin: 0;
}
nav.side-navbar.shrinked ul li a {
padding: 15px 2px;
border: none;
font-size: 0.8em;
color: #aaa;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
overflow: hidden;
text-overflow: ellipsis;
}
nav.side-navbar.shrinked ul li a[data-toggle="collapse"]::before {
content: '\f107';
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: auto;
right: 50%;
bottom: 0;
left: auto;
}
nav.side-navbar.shrinked ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
content: '\f106';
}
nav.side-navbar.shrinked ul li a:hover {
color: #fff;
border: none;
}
nav.side-navbar.shrinked ul li a:hover i {
color: #fff;
}
nav.side-navbar.shrinked ul li a i {
margin-right: 0;
margin-bottom: 2px;
display: block;
font-size: 1rem;
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
nav.side-navbar.shrinked ul li.active > a {
color: #fff;
}
nav.side-navbar.shrinked ul li.active > a i {
color: #fff;
}
nav.side-navbar.shrinked .sidebar-header .title {
display: none;
}
/* SIDEBAR MEDIAQUERIES ----------------------------------- */
#media (max-width: 1199px) {
nav.side-navbar {
margin-left: -90px;
min-width: 90px;
max-width: 90px;
text-align: center;
overflow: hidden;
}
nav.side-navbar span.heading {
margin: 0;
}
nav.side-navbar ul li a {
padding: 15px 2px;
border: none;
font-size: 0.8em;
color: #aaa;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
nav.side-navbar ul li a[data-toggle="collapse"]::before {
content: '\f107';
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: auto;
right: 50%;
bottom: 0;
left: auto;
}
nav.side-navbar ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
content: '\f106';
}
nav.side-navbar ul li a:hover {
color: #fff;
border: none;
}
nav.side-navbar ul li a:hover i {
color: #fff;
}
nav.side-navbar ul li a i {
margin-right: 0;
margin-bottom: 5px;
display: block;
font-size: 1.6em;
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
nav.side-navbar ul li.active > a {
color: #fff;
}
nav.side-navbar ul li.active > a i {
color: #fff;
}
nav.side-navbar .sidebar-header .title {
display: none;
}
nav.side-navbar.shrinked {
margin-left: 0;
}
.content-inner {
width: 100%;
}
.content-inner.active {
width: calc(100% - 90px);
}
}
I used bootstrap and template bootstrapious
Menu can show up when I used browser that I used to develop website
Menu and modal can't show up on another browser

Bootstrap Navbar on mobile shows up behind everything else

Been using bootstrap to style my header contents but recently facing something weird. The navbar that toggles after tapping on the hamburger menu shows up behind all the components. The z-index is maxed yet it doesn't work.
Here's my HTML:
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<img src="{% static 'assets/img/logo-hi-res.png' %}" alt="" class="ActLogo img-fluid">
<h1 class="logo me-auto"><span>My</span>Website.</h1>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li>Home</li>
<li><span>About</span>
<li class="dropdown"><span>Services</span><i class="bi bi-chevron-down"></i>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
<li>Pricing</li>
<li>Contact</li>
<button class="clientBt btn btn-sm btn-primary mr-2">CLIENT LOGIN</button>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<div class="header-social-links d-flex">
<i class="bu bi-twitter"></i>
<i class="bu bi-facebook"></i>
<i class="bu bi-instagram"></i>
<i class="bu bi-linkedin"></i></i>
</div>
</div>
And the CSS:
#header {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: grayscale(0) contrast(3) blur(5px);
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header .logo {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
#header .logo a {
color: #d40b00;
}
#header .logo a span {
color: #2C3380;
}
#header .ActLogo {
width: 60px;
height: 60px;
margin-top: -24px;
margin-bottom: -20px;
margin-right: 10px;
}
/* Social Links */
.header-social-links {
margin-left: 20px;
border-left: 1px solid #c4c4c4;
}
.header-social-links a {
color: #a0a0a0;
display: inline-block;
line-height: 0px;
transition: 0.3s;
padding-left: 20px;
}
.header-social-links a i {
line-height: 0;
}
.header-social-links a:hover {
color: #e85a5d;
}
#media (max-width: 480px) {
.header-social-links {
padding: 0 15px 0 0;
border-left: 0;
}
#header a .ActLogo {
display: none;
width: 40px;
height: 40px;
}
#header .logo a {
color: #E64238;
}
#header .logo a span {
color: #2C3380;
}
#media (max-width: 1200px) {
#header a .ActLogo {
display: none;
}
}
}
#media (max-width: 1200px) {
.header-social-links {
padding: 0 15px 0 0;
border-left: 0;
}
#header .logo {
font-size: 23px;
}
#header a .ActLogo{
margin-top: -10px;
margin-bottom: -10px;
}
}
/* Nav Menu */
/* Desktop */
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Roboto", sans-serif;
font-size: 13px;
font-weight: 600;
color: #111;
white-space: nowrap;
text-transform: uppercase;
transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #565b99;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-top: 2px solid #373F94;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 10px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #111;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
color: #373F94;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
#media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
.clientBt{
color: white;
background-color: #2C3380;
border: none;
padding: 0px;
margin-left: 30px;
border-radius: 8px;
}
.clientBt:hover{
background-color: #4b56ce;
}
.clientBt a{
color: white;
padding: 10px;
}
.clientBt a:hover{
color: white;
}
/*Mobile Navigation*/
.mobile-nav-toggle {
color: #111;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
/* SWITCH TO MOBILE HEADER */
#media (max-width: 1200px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
transition: 0.3s;
z-index: 999;
height: auto;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
z-index: 9999;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #111;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #2C3380;
}
.navbar-mobile .getstarted {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 999;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
color: #2C3380;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
And the Script:
// Mobile nav toggle
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
// Mobile nav activate dropdown
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
If you want to see the error in action, head over here, see the mobile view and try to toggle the menu from the hamburger.

Had to make a couple adjustments, actually isn't a problem of z-index at all.
The nav element has an overflow-hidden attached to it. Remove it.
The ul has no height to it, add a min-height: fit-content;.
These 2 changes should make it work as you expect it to.

Add CSS attribute on scroll function jQuery

I'm trying to create on scroll function, once the user scroll to certain point the menu add CSS background color attribute that appears.
But I'm having trouble, I believe I've used the correct scroll function usage, the syntax is also correct but the CSS() jQuery function doesn't goes to action as you can see in this codepen
How can I change CSS attribute once the user scrolling to certain point on the screen?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").css('background', 'blue');
} else {
$(".top-nav").css('background', 'transparent');
}
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width:1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width:1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: 'Rubik', sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1>
<a href="#" id="logo">
<span id="yd">yotam dahan</span>
<span class="logo-red">.</span>
<span id="com">COM</span>
</a>
</h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<a href="#!" id="burger-menu" onclick="toggleSideMenu()">
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</a>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>

The issue is because you've set overflow: scroll on the body element so the window isn't scrolling, the body is. As such the event handler is on the wrong element.
Also note that you should avoid putting CSS styling (as well as HTML) in your JS code. A better approach is using CSS classes. Then you can use toggleClass(). Try this:
jQuery($ => {
$('body').scroll(function () {
var scroll = $(this).scrollTop();
$('.top-nav').toggleClass('blue', scroll >= 100);
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav.blue {
background-color: blue;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width: 1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width: 1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: "Rubik", sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1><span id="yd">yotam dahan</span><span class="logo-red">.</span><span id="com">COM</span></h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>

Bootstrap navbar (left menu) not aligned properly at top

I have problems with left navigation bar positioning. If you run the snipped below on fullscreen and try to resize browser you will see that left navigation bar is not fixed to the top of page.
Also I header (logo and dropdowns) does not covers full page.
Maybe I missed something?
Any help will be highly appreciated!
Thanks, who wasted time to view this post and helped to dummy :)
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
header.navbar+nav.navbar{
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top{
margin-top: 50px;
}
.sidebar.navbar-fixed-top{
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px){
.navbar.navbar-default.navbar-fixed-top{
margin-top: 100px;
}
.sidebar.navbar-fixed-top{
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a{
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover{
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav{
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover{
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last{
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
nav.navbar-findcond { background: #fff; border-color: #ccc; box-shadow: 0 0 2px 0 #ccc; }
nav.navbar-findcond a { color: #f14444; }
nav.navbar-findcond ul.navbar-nav a { color: #f14444; border-style: solid; border-width: 0 0 2px 0; border-color: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover,
nav.navbar-findcond ul.navbar-nav a:visited,
nav.navbar-findcond ul.navbar-nav a:focus,
nav.navbar-findcond ul.navbar-nav a:active { background: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover { border-color: #f14444; }
nav.navbar-findcond li.divider { background: #ccc; }
nav.navbar-findcond button.navbar-toggle { background: #f14444; border-radius: 2px; }
nav.navbar-findcond button.navbar-toggle:hover { background: #999; }
nav.navbar-findcond button.navbar-toggle > span.icon-bar { background: #fff; }
nav.navbar-findcond ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; }
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; }
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; }
nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; }
nav.navbar-findcond span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head><title>test</title>
<link type="text/css" rel="stylesheet" media="all" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="all" href="nabs.css" />
<link type="text/css" rel="stylesheet" media="all" href="font-awesome.min.css" />
</head>
<body class="sidebar-mini">
<div class="main">
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<div class="nav-side-menu">
<div class="brand">logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#1" class="collapsed">
<i class="fa fa-gift fa-lg"></i> Processing </li>
<li data-toggle="collapse" data-target="#4" class="collapsed"><i class="fa fa-gift fa-lg"></i> Payments </li>
</ul>
</div>
</div>
</nav>
</aside>
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-fw fa-bell-o"></i> Invites <span class="badge">0</span>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-fw fa-tag"></i> new <span class="badge">Video</span> video</li>
<li><i class="fa fa-fw fa-thumbs-o-up"></i> <span class="badge">Music</span> liked</li>
</ul>
</li>
<li class="active">Main <span class="sr-only">(current)</span></li>
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>test1</li>
<li class="divider"></li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="content-header">
<h1>
<small>hi</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section><section class="content">
<div class="row">
<div class="col-md-12">
hi there</div></div>
</section>
<table border="0" style="border: 1px; border-style: dotted;" cellspacing="0" cellpadding="0" width="100%">
<tr bgcolor="#D5E7F7">
<td width="100%">
</td>
</tr>
</table>
</div>

The black navbar has a sidebar class seems to break the functionality of the navbar.
PS: fixing this will cause the black navbar to fix to the top of the screen and be overlayed by the white navbar, if you want the black one to have precedent you'll need to up its z-index.

How can I make this dropdown-menu not close itself after selecting an option

I'm using this NavBar that contains a dropdown menu:
http://jsfiddle.net/rvetgyen/
/**
* Created by Kupletsky Sergey on 17.10.14.
*
* Material Sidebar (Profile menu)
* Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7
* You can use this sidebar in Bootstrap (v3) projects. HTML-markup like Navbar bootstrap component will make your work easier.
* Dropdown menu and sidebar toggle button works with JQuery and Bootstrap.min.js
*/
// Sidebar toggle
//
// -------------------
$(document).ready(function() {
var overlay = $('.sidebar-overlay');
$('.sidebar-toggle').on('click', function() {
var sidebar = $('#sidebar');
sidebar.toggleClass('open');
if ((sidebar.hasClass('sidebar-fixed-left') || sidebar.hasClass('sidebar-fixed-right')) && sidebar.hasClass('open')) {
overlay.addClass('active');
} else {
overlay.removeClass('active');
}
});
overlay.on('click', function() {
$(this).removeClass('active');
$('#sidebar').removeClass('open');
});
});
// Sidebar constructor
//
// -------------------
$(document).ready(function() {
var sidebar = $('#sidebar');
var sidebarHeader = $('#sidebar .sidebar-header');
var sidebarImg = sidebarHeader.css('background-image');
var toggleButtons = $('.sidebar-toggle');
// Hide toggle buttons on default position
toggleButtons.css('display', 'none');
$('body').css('display', 'table');
// Sidebar position
$('#sidebar-position').change(function() {
var value = $(this).val();
sidebar.removeClass('sidebar-fixed-left sidebar-fixed-right sidebar-stacked').addClass(value).addClass('open');
if (value == 'sidebar-fixed-left' || value == 'sidebar-fixed-right') {
$('.sidebar-overlay').addClass('active');
}
// Show toggle buttons
if (value != '') {
toggleButtons.css('display', 'initial');
$('body').css('display', 'initial');
} else {
// Hide toggle buttons
toggleButtons.css('display', 'none');
$('body').css('display', 'table');
}
});
// Sidebar theme
$('#sidebar-theme').change(function() {
var value = $(this).val();
sidebar.removeClass('sidebar-default sidebar-inverse sidebar-colored sidebar-colored-inverse').addClass(value)
});
// Header cover
$('#sidebar-header').change(function() {
var value = $(this).val();
$('.sidebar-header').removeClass('header-cover').addClass(value);
if (value == 'header-cover') {
sidebarHeader.css('background-image', sidebarImg)
} else {
sidebarHeader.css('background-image', '')
}
});
});
/**
* Created by Kupletsky Sergey on 08.09.14.
*
* Add JQuery animation to bootstrap dropdown elements.
*/
(function($) {
var dropdown = $('.dropdown');
// Add slidedown animation to dropdown
dropdown.on('show.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add slideup animation to dropdown
dropdown.on('hide.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
})(jQuery);
(function(removeClass) {
jQuery.fn.removeClass = function(value) {
if (value && typeof value.test === "function") {
for (var i = 0, l = this.length; i < l; i++) {
var elem = this[i];
if (elem.nodeType === 1 && elem.className) {
var classNames = elem.className.split(/\s+/);
for (var n = classNames.length; n--;) {
if (value.test(classNames[n])) {
classNames.splice(n, 1);
}
}
elem.className = jQuery.trim(classNames.join(" "));
}
}
} else {
removeClass.call(this, value);
}
return this;
}
})(jQuery.fn.removeClass);
#import"https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
/* -- import Roboto Font ---------------------------- */
/* -- import Material Icons Font -------------------- */
#font-face {
font-family: 'Material Design Iconic Font';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.eot?v=1.0');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.eot?#iefix&v=1.0') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.woff?v=1.0') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.ttf?v=1.0') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/Material-Design-Iconic-Font.svg?v=1.0#Material-Design-Iconic-Font') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="mds-"],
[class*=" mds-"] {
display: inline-block;
font: normal normal normal 14px/1'Material Design Iconic Font';
font-size: inherit;
speak: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mds {
line-height: inherit;
vertical-align: bottom;
}
.mds-inbox:before {
content: "\f10c";
}
.mds-star:before {
content: "\f2e5";
}
.mds-send:before {
content: "\f119";
}
.mds-drafts:before {
content: "\f107";
}
.mds-arrow-back:before {
content: "\f297";
}
.mds-arrow-forward:before {
content: "\f298";
}
/* -- You can use this sidebar in Bootstrap (v3) projects. HTML-markup like Navbar bootstrap component will make your work easier. -- */
/* -- Box model ------------------------------- */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* -- Demo style ------------------------------- */
html,
body {
position: relative;
min-height: 100%;
height: 100%;
}
body {
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 1.4;
color: #212121;
background-color: #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.sidebar-overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background: #000;
z-index: 1034;
-webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.sidebar-overlay.active {
opacity: 0.5;
visibility: visible;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
.top-bar {
height: 25px;
background: rgba(0, 0, 0, 0.1);
}
/* -- Google typography ------------------------------- */
.headline {
font-size: 24px;
font-weight: 300;
line-height: 1.1;
color: #212121;
text-transform: inherit;
letter-spacing: inherit;
}
.subhead {
font-size: 16px;
font-weight: 300;
line-height: 1.1;
color: #212121;
text-transform: inherit;
letter-spacing: inherit;
}
/* -- Bootstrap-like style ------------------------------- */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.dropdown-menu {
display: none;
}
/* -- Constructor style ------------------------------- */
.constructor {
position: relative;
margin: 0;
padding: 0 0px;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.sidebar,
.wrapper {
display: table-cell;
vertical-align: top;
}
.sidebar-stacked.open + .wrapper .constructor {
margin-left: 280px;
}
#media (max-width: 768px) {
.sidebar-stacked.open + .wrapper .constructor {
margin-left: 240px;
}
}
/* -- Sidebar style ------------------------------- */
.sidebar {
position: relative;
display: block;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: none;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.sidebar:before,
.sidebar:after {
content: " ";
display: table;
}
.sidebar:after {
clear: both;
}
.sidebar::-webkit-scrollbar-track {
border-radius: 2px;
}
.sidebar::-webkit-scrollbar {
width: 5px;
background-color: #F7F7F7;
}
.sidebar::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #BFBFBF;
}
.sidebar .sidebar-header {
position: relative;
height: 157.5px;
margin-bottom: 8px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-header.header-cover {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.sidebar .sidebar-header:hover .sidebar-toggle {
opacity: 1;
}
.sidebar .sidebar-toggle {
position: relative;
float: right;
margin: 16px;
padding: 0;
background-image: none;
border: none;
height: 40px;
width: 40px;
font-size: 20px;
opacity: 0.7;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-toggle:before,
.sidebar .sidebar-toggle:after {
content: " ";
display: table;
}
.sidebar .sidebar-toggle:after {
clear: both;
}
.sidebar .icon-material-sidebar-arrow:before {
content: "\e610";
}
.sidebar .sidebar-image img {
width: 54px;
height: 54px;
margin: 16px;
border-radius: 50%;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-brand {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 48px;
line-height: 48px;
padding: 0;
padding-left: 16px;
padding-right: 56px;
text-decoration: none;
clear: both;
font-weight: 500;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-brand:hover,
.sidebar .sidebar-brand:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.sidebar .sidebar-brand .caret {
position: absolute;
right: 24px;
top: 24px;
}
.sidebar .sidebar-brand .sidebar-badge {
position: absolute;
right: 16px;
top: 12px;
}
.sidebar .sidebar-brand:hover,
.sidebar .sidebar-brand:focus {
text-decoration: none;
}
.sidebar .sidebar-badge {
display: inline-block;
min-width: 24px;
height: 24px;
line-height: 24px;
padding: 0 3px;
font-size: 10px;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
.sidebar .sidebar-badge.badge-circle {
border-radius: 50%;
}
.sidebar .sidebar-divider,
.sidebar .sidebar-nav .divider {
position: relative;
display: block;
height: 1px;
margin: 8px 0;
padding: 0;
overflow: hidden;
}
.sidebar .sidebar-text {
display: block;
height: 48px;
line-height: 48px;
padding: 0;
padding-left: 16px;
padding-right: 56px;
text-decoration: none;
clear: both;
font-weight: 500;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-text:hover,
.sidebar .sidebar-text:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.sidebar .sidebar-text .caret {
position: absolute;
right: 24px;
top: 24px;
}
.sidebar .sidebar-text .sidebar-badge {
position: absolute;
right: 16px;
top: 12px;
}
.sidebar .sidebar-icon {
display: inline-block;
margin-right: 16px;
min-width: 40px;
width: 40px;
text-align: left;
font-size: 20px;
}
.sidebar .sidebar-icon:before,
.sidebar .sidebar-icon:after {
vertical-align: middle;
}
.sidebar .sidebar-nav {
margin: 0;
padding: 0;
}
.sidebar .sidebar-nav li {
position: relative;
list-style-type: none;
}
.sidebar .sidebar-nav li a {
position: relative;
cursor: pointer;
user-select: none;
display: block;
height: 48px;
line-height: 48px;
padding: 0;
padding-left: 16px;
padding-right: 56px;
text-decoration: none;
clear: both;
font-weight: 500;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sidebar .sidebar-nav li a:hover,
.sidebar .sidebar-nav li a:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.sidebar .sidebar-nav li a .caret {
position: absolute;
right: 24px;
top: 24px;
}
.sidebar .sidebar-nav li a .sidebar-badge {
position: absolute;
right: 16px;
top: 12px;
}
.sidebar .sidebar-nav li a:hover {
background: transparent;
}
.sidebar .sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.sidebar-default {
background-color: #ffffff;
}
.sidebar-default .sidebar-header {
background-color: #eceff1;
}
.sidebar-default .sidebar-toggle {
color: #212121;
background-color: transparent;
}
.sidebar-default .sidebar-brand {
color: #DEDEDE;
background-color: transparent;
}
.sidebar-default .sidebar-brand:hover,
.sidebar-default .sidebar-brand:focus {
color: #212121;
background-color: rgba(0, 0, 0, 0.1);
}
.sidebar-default .sidebar-badge {
color: #ffffff;
background-color: #bdbdbd;
}
.sidebar-default .sidebar-divider,
.sidebar-default .sidebar-nav .divider {
background-color: #bdbdbd;
}
.sidebar-default .sidebar-text {
color: #212121;
}
.sidebar-default .sidebar-nav li > a {
color: #212121;
background-color: transparent;
}
.sidebar-default .sidebar-nav li > a i {
color: #757575;
}
.sidebar-default .sidebar-nav li:hover > a,
.sidebar-default .sidebar-nav li > a:hover {
color: #212121;
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav li:hover > a i,
.sidebar-default .sidebar-nav li > a:hover i {
color: #757575;
}
.sidebar-default .sidebar-nav li:focus > a,
.sidebar-default .sidebar-nav li > a:focus {
color: #212121;
background-color: transparent;
}
.sidebar-default .sidebar-nav li:focus > a i,
.sidebar-default .sidebar-nav li > a:focus i {
color: #757575;
}
.sidebar-default .sidebar-nav > .open > a,
.sidebar-default .sidebar-nav > .open > a:hover,
.sidebar-default .sidebar-nav > .open > a:focus {
color: #212121;
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav > .active > a,
.sidebar-default .sidebar-nav > .active > a:hover,
.sidebar-default .sidebar-nav > .active > a:focus {
color: #212121;
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav > .disabled > a,
.sidebar-default .sidebar-nav > .disabled > a:hover,
.sidebar-default .sidebar-nav > .disabled > a:focus {
color: #e0e0e0;
background-color: transparent;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu {
background-color: #e0e0e0;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > li > a:focus {
background-color: #e0e0e0;
color: #212121;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > li > a:hover {
background-color: #cecece;
color: #212121;
}
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > .active > a,
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > .active > a:hover,
.sidebar-default .sidebar-nav > .dropdown > .dropdown-menu > .active > a:focus {
color: #212121;
background-color: #e0e0e0;
}
.sidebar {
width: 0;
-webkit-transform: translate3d(-280px, 0, 0);
transform: translate3d(-280px, 0, 0);
}
.sidebar.open {
min-width: 280px;
width: 280px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar-fixed-left,
.sidebar-fixed-right,
.sidebar-stacked {
position: fixed;
top: 0;
bottom: 0;
z-index: 1035;
}
.sidebar-stacked {
left: 0;
}
.sidebar-fixed-left {
left: 0;
box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.35);
}
.sidebar-fixed-right {
right: 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
-webkit-transform: translate3d(280px, 0, 0);
transform: translate3d(280px, 0, 0);
}
.sidebar-fixed-right.open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sidebar-fixed-right .icon-material-sidebar-arrow:before {
content: "\e614";
}
#media (max-width: 768px) {
.sidebar.open {
min-width: 240px;
width: 240px;
}
.sidebar .sidebar-header {
height: 135px;
}
.sidebar .sidebar-image img {
width: 44px;
height: 44px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Overlay for fixed sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-default open" role="navigation">
<!-- Sidebar header -->
<div class="sidebar-header header-cover" style="background-image: url(http://2.bp.blogspot.com/-2RewSLZUzRg/U-9o6SD4M6I/AAAAAAAADIE/voax99AbRx0/s1600/14%2B-%2B1%2B%281%29.jpg);">
<!-- Top bar -->
<div class="top-bar"></div>
<!-- Sidebar toggle button -->
<button type="button" class="sidebar-toggle"> <i class="icon-material-sidebar-arrow"></i>
</button>
<!-- Sidebar brand image -->
<div class="sidebar-image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53474/atom_profile_01.jpg">
</div>
<!-- Sidebar brand name --> <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
john.doe#gmail.com
<b class="caret"></b>
</a>
</div>
<!-- Sidebar navigation -->
<ul class="nav sidebar-nav">
<li class="dropdown">
<ul id="settings-dropdown" class="dropdown-menu">
<li> <a href="#" tabindex="-1">
Profile
</a>
</li>
<li> <a href="#" tabindex="-1">
Settings
</a>
</li>
<li> <a href="#" tabindex="-1">
Help
</a>
</li>
<li> <a href="#" tabindex="-1">
Exit
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-inbox"></i>
Inbox
</a>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-star"></i>
Starred
</a>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-send"></i>
Sent Mail
</a>
</li>
<li>
<a href="#">
<i class="sidebar-icon md-drafts"></i>
Drafts
</a>
</li>
<li class="divider"></li>
<li class="dropdown"> <a class="ripple-effect dropdown-toggle" href="#" data-toggle="dropdown">
All Mail
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="#" tabindex="-1">
Social
<span class="sidebar-badge">12</span>
</a>
</li>
<li> <a href="#" tabindex="-1">
Promo
<span class="sidebar-badge">0</span>
</a>
</li>
</ul>
</li>
<li> <a href="#">
Trash
<span class="sidebar-badge">3</span>
</a>
</li>
<li> <a href="#">
Spam
<span class="sidebar-badge">456</span>
</a>
</li>
<li> <a href="#">
Follow Up
<span class="sidebar-badge badge-circle">i</span>
</a>
</li>
</ul>
<!-- Sidebar divider -->
<!-- <div class="sidebar-divider"></div> -->
<!-- Sidebar text -->
<!-- <div class="sidebar-text">Text</div> -->
</aside>
I want to make it in a way that if you click in "All Mail" and then "Social" for example, the "All Mail" dropdown will still be open and the only way to close it is clicking again in "All Mail".
To ilustrate better what I trying to achieve as result is something similar to this sidebar:
https://material.angularjs.org/#/
After you select a category you can navigate through the elements and the dropdown (if I can call it like that) don't hide.

This will solve your problem:
$("ul.dropdown-menu li a").click(function(){
$(this).parent().parent().siblings(".dropdown-toggle").show();
});

Categories