We Keep Coding

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

close and open menu on click in mobile view is not working?

I have a mobile menu where user click on caret icon of sub-menus and it open and When user click again on that caret icon it should be closed but it is not working in mobile view.
body {
font-family: 'Poppins', sans-serif;
font-family: FuturaBT-Book, sans-serif;
background-color: #fff;
font-size: 16px;
color: #666;
line-height: 24px
}
.main-top {
color: white;
font-size: 24px;
margin-bottom: 0px;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
a.linktour:link {
color: #666666;
text-decoration: none;
}
.services-details-information .last-section li a.active {
background-color: #fc453e;
border-color: #f64c67;
color: #fff
}
.main-navigation-top {
padding: 15px 60px 15px;
}
.
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a:hover,
.main-navigation-top .navbar-inverse .navbar-nav>li>a:focus {
color: #F30;
}
.main-navigation-top .navbar-inverse .navbar-brand img {
float: left;
margin-right: 15px;
position: relative;
top: -12px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 28px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: #000;
}
.main-navigation-top .navbar-inverse .navbar-brand span {
display: block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
}
.main-navigation-top .navbar-inverse .navbar-nav>.open>a,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:focus,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:hover {
background: none;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: fixed !important;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 10px #f3f3f3;
padding: 30px 20px;
background: #fff;
z-index: 99;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none;
float: left;
width: 100%;
min-height: 110px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li {
line-height: 24px;
background: url(../../img/right-arrow.png) no-repeat left top 8px;
background-size: 9px;
padding: 0px 17px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a {
color: #8a623d;
line-height: 18px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a span {
float: right;
margin-top: 3px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a:hover {
color: #F30;
}
.main-navigation-top .dropdown-menu {
background: none;
border-radius: 0;
box-shadow: none;
border: none;
}
.dropdown-menu {
width: 100%;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 {
min-height: 260px;
padding-bottom: 20px;
}
.header-text h1 {
color: #fff;
font-size: 60px;
font-weight: 700;
text-transform: capitalize;
}
.header-text h1 span {
color: #FF9F1C;
}
.header-text p {
color: #fff;
font-size: 16px;
margin-bottom: 30px;
}
.header-search-form-area input {
display: inline-block;
}
.header-search-form-area input[type="text"] {
background: #fff;
border: none;
color: #000;
font-weight: 400;
padding: 15px;
width: 40%;
}
.header-search-form-area input[type="submit"] {
background: #FF9F1C;
border: none;
color: #fff;
font-weight: 400;
padding: 15px;
width: 10%;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 60px 25px;
z-index: 999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: #fff;
box-shadow: 0 0 10px #f2f2f2;
}
}
.logo {
padding-top: 20px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo img {
width: 150px;
}
.mainmenu .navbar-nav li {
padding: 13px 5px 12px;
}
.mainmenu .navbar-nav li a {
color: #8a623d;
text-transform: capitalize;
font-size: 17px;
padding-right: 0;
padding-left: 0;
padding: 10px 12px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 400;
}
.mainmenu .navbar-nav img {
padding: 10px;
box-shadow: 0 0 10px #f2f2f2;
}
.mainmenu .navbar-nav li a:hover {
background: none;
color: #FF9F1C;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.caret {
background: url(../../img/top-arrow.png) no-repeat right;
border: none;
width: 9px;
height: 6px;
margin-left: 5px;
}
.nav li a:focus,
.nav li a:hover {
background: none;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
#nav-link-hover-bg: #eeeeee;
#nav-tabs-border-color: #dddddd;
#border-radius-base: 5px;
#screen-xs-max: 767px;
//css to add hamburger and create dropdown
.nav-tabs.nav-tabs-dropdown,
.nav-tabs-dropdown {
#media (max-width: #screen-xs-max) {
border: 1px solid #nav-tabs-border-color;
border-radius: #border-radius-base;
overflow: hidden;
position: relative;
&::after {
content: "☰";
position: absolute;
top: 8px;
right: 15px;
z-index: 2;
pointer-events: none;
}
&.open {
a {
position: relative;
display: block;
}
>li.active>a {
background-color: #f5e6d7;
}
}
li {
display: block;
padding: 0;
vertical-align: bottom;
}
>li>a {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
display: inline-block;
border-color: transparent;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
>li.active>a {
display: block;
border-color: transparent;
position: relative;
z-index: 1;
background: #fff;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
}
}
.nav-tabs.nav-justified>li {
width: 0px;
background: #f4f7f9;
border-right: #fff 2px solid;
}
.nav-tabs.nav-justified>li:last-child {
border: none;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 26px;
border-radius: 0px;
color: #000;
border-bottom: none;
}
.nav-tabs.nav-justified>li>a:hover {
background: #f5e6d7;
border-right: #f5e6d7 1px solid;
background: url(../img/tb-arrow.png) no-repeat bottom center;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
background: #f5e6d7;
border: none;
}
.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
position: static;
}
.megamenu .container {
position: relative;
}
.megamenu .dropdown-menu {
left: auto;
}
.megamenu .megamenu-content {
padding: 15px;
}
.megamenu .megamenu-content h3 {
margin-top: 0;
color: #428bca;
font-size: 18px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}
#media(min-width:120px) and (max-width:767px) {
.main-navigation-top {
padding: 15px;
}
.main-navigation-top .navbar-inverse .navbar-toggle {
border: none;
}
.main-navigation-top .navbar-inverse .navbar-toggle:focus,
.main-navigation-top .navbar-inverse .navbar-toggle:hover {
background: none;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(1) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(3) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(4) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(5) .dropdown-menu .container .col-lg-3 {
min-height: inherit;
padding-bottom: 15px
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
margin-top: 0px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: inherit;
margin: 0 auto;
min-height: inherit;
padding: 15px 0;
}
.navbar-toggle .icon-bar {
width: 32px;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
.header-top-area {
padding: 20px 15px;
}
.navbar-toggle .icon-bar {
background: #8a623d !important;
margin-top: 5px;
}
.services-details-area {
padding: 20px 15px;
}
.nav-tabs.nav-justified>li {
width: 100%;
text-align: center;
}
.nav-tabs.nav-justified>li>a {
padding: 5px 26px;
}
.mainmenu .navbar-nav li {
margin-left: 0px;
}
.caret {
float: right;
margin-top: 11px;
}
.about-services .col-lg-12 {
padding: 20px 15px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 20px;
}
.main-navigation-top .navbar-inverse .navbar-collapse,
.main-navigation-top .navbar-inverse .navbar-form {
border-top: none;
margin-top: 25px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 img {
display: none;
}
}
#media (min-width:767px) and (max-width:1024px) {
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 15px;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 18px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
padding: 10px 10px;
}
.mamm {
padding-left: 15px !important;
padding-right: 15px !important;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
#sidebar {
display: block;
}
#media only screen and (max-width: 550px) {
#sidebar {
display: none;
}
}
#media (max-width: 550px) {
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none !important;
float: none !important;
width: 100% !important;
min-height: 60px !important;
}
h2 {
font-size: 20px;
}
.menuleftbar2 {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-navigation-top">
<div class="row">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<img src="https://www.die-aethiopienreise.de/img/menu-bar.png" width="78">
</button>
<a class="navbar-brand" href="/index.html"> B <span>Studi</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Äthiopien Reisen <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3 style="margin-top:-1px;">Stud</h3>
<ul>
<li>Äthiopien Intensiv <span>24 Tage</span> </li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Äthiopien Informationen<span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3>Reiseinformationen</h3>
<ul>
<li>Wissenwertes</li>
<li>Reisewetter</li>
</ul>
</div>
<div class="col-lg-3">
<h3>Landesinformationen</h3>
<ul>
<li>Nationalparks</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Katalog <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>KatalogDownload</li>
<li>Katalogbestellung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Kontakt <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>Kontakt</li>
<li>Reiseanmeldung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
</ul>
</div>
</nav>
</div>
</div>
drop-down will open now again when user click on the icon it should be closed but it is not working as expected!

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.

Bootstrap - collapsed sidebar by default

I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:
HTML:
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Back to the article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<div class="container-fluid">
<h2>Collapsible Sidebar Using Bootstrap 3</h2></div></div>
JS:
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass("active");
});
});
CSS:
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.
thanks for any hints..

I think that you have switch the parameter of active class, if so you can also eliminate the last mediaquery . Try this
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar {
margin-left:-250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}

How to get submenu to appear below main menu

Menu
NOTE: you may need to expand the Result Box
above is what i am trying to fix, the idea is that when you hover the Men and Women <li> elements a submenu appears below, this is why the hidden div is inside the <li> because then when you leave the link to go into the div it's not going to disappear. however my problem is that the other menu items are being pushed down.
Now before i did have it working, this is what i had
Old Version
however i was requested to push the first 3 links to the left and the last link to the right. all i did was add floats which seem to be the cause. i have tried changing the display property, I've tried changing the position property however the only other result i get that the sub menu sets on the end and not under the menu.
I've about ran out of idea except for getting the x and y coordinates and using css to force the div to sit there however i don't think it'll work unless it's outside the <li>, What else can i do to get my submenu to work correctly while keeping the menu alignment as it is

Is this the result you wanted to achieve? I've added my CSS at the end, for the floating of the "Cart" entry, I added an ID (cart) to cart <li> element.
JSFiddle
Here is a snippet.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/* ie 6/7 */
}
/* Actual CSS */
#copyright {
text-align: center;
margin: 0px auto;
font-size: 10px;
}
#container {
width: 930px;
margin: 0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float: left;
text-align: center;
}
#byline {
background: #7D787D;
text-align: center;
color: white;
margin-top: 12px;
margin-bottom: 12px;
padding: 5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear: both;
margin: 0;
padding: 0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left: 27px !important;
}
.shipping a {
padding-left: 47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left: 75px !important;
padding-top: .2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left: 23px !important;
padding-top: .2em !important;
}
#herofooter ul li a:hover,
#footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a,
#footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu {
width: 800px;
text-align: center;
margin: 0px auto;
}
#footernav li {
font-size: 12px;
}
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color: #000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color: #000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color: #CC3333;
color: #FFFFFF;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale,
#logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align: center;
margin-right: 25px;
display: block;
float: right;
margin-top: 15px;
}
#stylesearch {
border: 1px solid black;
padding: 0;
margin: 0;
width: 190px;
padding-top: 2px;
line-height: 22px;
}
#productsearch {
padding-left: 5px;
padding-right: 5px;
}
#searchbox {
border: 0;
border-right: 1px solid #686868;
margin-right: 2px;
margin-bottom: 1px;
margin-top: 1px;
padding: 5px;
width: 140px;
float: left;
}
#searchbox:focus,
#searchbox:hover {
background: #FDFDFD;
color: #000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em;
/*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
float: right;
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top: 1px solid #CC0001;
}
/* nav me */
.navme ul li {
display: inline;
}
.navme ul li a {
text-decoration: none;
}
#memberprogram p {
/* margin: 0; */
}
#footermenu {
text-align: left;
}
#footernav li {
display: inline-block;
width: 145px;
}
.cartimage {
vertical-align: middle;
margin-top: -7px;
border-style: none
}
.navbuttons {
min-height: 30px;
}
.mega-menu {
float: left;
z-index: 1000;
position: inherit;
text-align: left;
background: #aaaaaa;
}
/*--------Added CSS---------*/
.mega-menu {
position: absolute;
left: 0;
top: 100%;
width: 500px;
}
#navbar ul li {
position: relative;
float: left;
}
#navbar ul ul li {
float: none;
}
#navbar ul ul li a {
padding: 0 15px 0 15px;
}
#navbar ul li:hover > ul {
display: block;
}
#navbar ul li#cart {
float: right;
}
li.header {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function showMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "block"
})
}
function hideMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "none"
})
}
</script>
<div id="navbar" class="navbuttons">
<ul id="headernav">
<li>New Arrivals
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Men
<div id="mens-cat" name="mens-cat" class="mega-menu" style="display: none; margin-top: -1px;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Activewear
</li>
<li> Business Shirts
</li>
<li> Coats and Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Women
<div id="womens-cat" name="womens-cat" class="mega-menu" style="display: none;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Basic Tops
</li>
<!-- <li>Cathouse Suits</li>-->
<li> Fashion Tops
</li>
<li> Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li id="cart">My Cart
</li>
</ul>
</div>

see the jsfiddle code : http://jsfiddle.net/sbaxe5m3/2/
add this css:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* ie 6/7 */
}
/* Actual CSS */
#copyright { text-align:center; margin:0px auto; font-size:10px; }
#container {
width: 930px;
margin:0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float:left;
text-align:center;
}
#byline {
background: #7D787D;
text-align:center;
color: white;
margin-top:12px;
margin-bottom:12px;
padding:5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear:both;
margin:0;
padding:0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left:27px !important;
}
.shipping a {
padding-left:47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left:75px !important;
padding-top:.2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left:23px !important;
padding-top:.2em !important;
}
#herofooter ul li a:hover, #footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a, #footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu { width: 800px; text-align:center; margin: 0px auto;}
#footernav li { font-size:12px; }
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color:#000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color:#000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color:#CC3333 ;
color:#FFFFFF ;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale, #logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align:center;
margin-right:25px;
display:block;
float:right;
margin-top:15px;
}
#stylesearch {
border:1px solid black;
padding:0;
margin:0;
width:190px;
padding-top:2px;
line-height:22px;
}
#productsearch {
padding-left:5px;
padding-right:5px;
}
#searchbox {
border:0;
border-right:1px solid #686868;
margin-right:2px;
margin-bottom:1px;
margin-top:1px;
padding:5px;
width:140px;
float: left;
}
#searchbox:focus, #searchbox:hover {
background: #FDFDFD;
color:#000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li { display: inline; }
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em; /*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top:1px solid #CC0001;
}
/* nav me */
.navme ul li { display: inline; }
.navme ul li a {
text-decoration: none;
}
#memberprogram p
{
/* margin: 0; */
}
#footermenu { text-align:left; }
#footernav li { display: inline-block; width: 145px; }
.cartimage
{
vertical-align: middle;
margin-top: -7px;
border-style:none
}
.navbuttons
{
min-height:30px;
}
#navbar ul li {
display: inline;
line-height: 30px;
position: relative;
}
.mega-menu
{
float: left;
z-index:1000;
position: inherit;
text-align:left;
background:#aaaaaa; left: 50%;
margin-left: -327px;
position: absolute;
top: 27px;
width: 654px;
}