Issues with using Active class in Bootstrap

Issues with using Active class in Bootstrap - javascript

Currently, the ‘Active’ class is seen on the FAQ and it creates a misleading impression Example. As of now, the hovering still exists in White. I want to achieve where An active element will be in White and display accordingly when the user clicks Example. I have provided my .html and .css, however, the provided snippet output is inaccurate. Please use your preferred software such as Visual Studio, etc. Thank you.
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.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;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
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 {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/mainCSS.css" />
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<!-- -->
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-briefcase"></i>
About
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fas fa-image"></i>
Portfolio
</a>
</li>
<li class="active">
<a href="#">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i class="fas fa-paper-plane"></i>
Contact
</a>
</li>
</ul>
<!-- -->
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Sidebar 1 -->
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Minimise Sidebar</span>
</button>
</div>
</nav>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
Update 1
The following result is correct https://ibb.co/phP4c8d, however how do I make it White for the remaining elements? It's something like this https://codepen.io/gearmobile/pen/bByZdG. Correct me if I'm wrong but I believe it requires a JavaScript.

i dont know if i understood your question but i think what you want is this,
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}

Related

Submenu not opening on clicking arrow button , instead opens on clicking on the li tag i.e services

On clicking the arrow button it shows no action, however on clicking services it opens up. Well, what I want is to open on clicking the arrow button as well as service i.e. li tag. And also on clicking the arrow button, when the show class is active the caret or angle down button should horizontally rotate 180 deg. These are the two things I want in my work, let me clarify again.
On clicking the arrow button submenu should appear.
Rotation of arrow button 180deg when the submenu is open.
Link to my work is: https://codepen.io/TA0011/pen/yLjWwGQ
//for sidebar
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
//for sidebar
//for sidebar submenu
const caretButton = document.querySelectorAll(".caret");
caretButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = event.target.parentElement.querySelector(".sub-menu");
subMenu.classList.toggle("show");
})
);
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
}
header {
height: 50px;
width: 100%;
background: coral;
position: fixed;
}
header img {
height: 40px;
width: 40px;
margin: 5px;
}
#sidebar-toggle {
display: inline-block;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
padding: 5px 10px;
height: 40px;
width: 40px;
margin-top: 5px;
float: right;
}
#sidebar-toggle div {
width: 20px;
height: 2px;
background-color: #fff;
margin: 6px 0;
transition: all 0.3s ease 0s;
cursor: grab;
}
#sidebar-toggle.open .bar4 {
transform: translate(0, 8px) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate(0px, -8px) rotate(45deg);
}
#mySidebar {
transition: all 0.2s linear;
transform: translateX(-250px);
display: flex;
flex-direction: column;
height: calc(100vh - 50px);
box-sizing: border-box;
top: 50px;
}
/* then a few properties removed and box-sizing added */
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
z-index: 0;
transition: all 0.5s ease;
}
.open.sidebar {
display: flex;
}
.sidebar-nav {
flex: 1;
overflow: auto;
}
#mySidebar.open {
transform: translateX(0);
}
.sidebar-header {
padding: 0px;
width: 100%;
background: rgba(0, 136, 169, 1);
height: 3rem;
}
.sidebar-header .profile {
display: flex;
color: #fff;
}
.profile .profile-image img {
flex-wrap: wrap;
pointer-events: none;
border-radius: 50%;
width: 40px;
float: none;
display: block;
object-fit: fill;
height: 40px;
margin-left: 20px;
}
.profile .profile-name {
display: inline-flex;
display: flex;
align-items: center;
justify-content: center;
margin: 0 2px 0 5px;
font-size: 14px;
font-weight: 600 !important;
}
.profile .profile-name i {
margin: -2px 5px 0 2px;
font-size: 16px;
}
.profile-stats {
margin: 10px 0;
color: #fff;
font-size: 12px;
display: flex;
flex-direction: row;
gap: 0.25rem;
align-items: center;
cursor: pointer;
}
.profile-stats .stats {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
#followerCount,
#mediaCount,
#followingCount {
font-size: 10px;
}
.sidebar-nav {
margin: 0;
overflow: auto;
}
.sidebar-nav ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
list-style: none;
padding: 0 15px;
line-height: 30px;
box-sizing: border-box;
}
.sidebar-nav ul li {
width: 100%;
box-sizing: border-box;
color: #007bff;
padding: 5px 10px;
margin: 1px 0;
}
.sidebar-nav ul li a {
text-decoration: none;
}
.sidebar-nav ul .active,
.sidebar-nav ul .active a .icon {
background: #007bff;
color: #ffffff;
border-radius: 10px;
}
.sidebar-nav ul li:hover,
.sidebar-nav ul li:hover a .icon,
.sidebar-nav ul li:hover a {
background: #007bff;
color: #ffffff;
border-radius: 10px;
}
.sidebar-nav ul li a .icon {
color: #007bff;
width: 30px;
display: inline-block;
}
.sidebar-nav ul li a .caret {
left: 90px;
position: relative;
}
.sidebar-nav .sidebar-nav-header {
text-transform: uppercase;
font-size: 11px;
margin: -0.75rem 1.5rem;
color: #0c7db1;
}
.sidebar-footer {
background: #FF7F50;
text-align: center;
}
.sidebar-footer span a {
display: block;
padding: .5em 0;
color: #fff;
background: #FF7F50;
font-weight: 600 !important;
text-decoration: none;
}
.sidebar-footer span i {
width: 30px;
font-size: 16px;
}
.sidebar-nav ul .sub-menu {
display: none;
}
.sidebar-nav ul .sub-menu.show {
display: flex;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<header>
<img src="https://www.tailorbrands.com/wp-content/uploads/2020/07/mcdonalds-logo.jpg" class="logo" alt="Logo">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id="mySidebar">
<div class="sidebar-header">
<div class="profile">
<div class="profile-image">
<img src="https://media-exp1.licdn.com/dms/image/C560BAQHMnA03XDdf3w/company-logo_200_200/0/1519855918965?e=2147483647&v=beta&t=J3kUMZwIphc90TFKH5oOO9Sa9K59fimgJf-s_okU3zs">
</div>
<div class="profile-name">
<i class="fas fa-chess-pawn"></i><span>Umann Goswami</span>
</div>
</div>
</div>
<!--sidebar-header-->
<div class="sidebar-nav">
<ul>
<li class="active"><span class="icon"><i class="fas fa-home"></i></span>Home</li>
<li class="caret"><a><span class="icon"><i class="fas fa-chart-bar"></i></span>Services<span class="caret fas fa-angle-down"</a>
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li><span class="icon"><i class="fas fa-pen-nib"></i></span>Home
</li>
<li><span class="icon"><i class="fas fa-file-alt"></i></span>Home</li>
<li><span class="icon"><i class="far fa-comments"></i></span>home</li>
<li><span class="icon"><i class="fas fa-cog"></i></span>home</li>
</ul>
<div class="sidebar-nav-header">
Admin
</div>
<ul>
<li><span class="icon"><i class="fas fa-users"></i></span>home</li>
</ul>
<div class="sidebar-nav-header">
Profile
</div>
<ul>
<li><a href=""><span class="icon"><i class="fas
fa-user"></i></span>home</a></li>
<li><span class="icon"><i class="fas fa-user-edit"></i></span>Home</li>
</ul>
<div class="sidebar-nav-header">
Analysis
</div>
<ul>
<li><span class="icon"><i class="fas fa-user"></i></span>Home</li>
<li><span class="icon"><i class="fas fa-user-edit"></i></span>Home</li>
</ul>
</div>
<!--sidebar-nav-->
<div class="sidebar-footer">
<span><i class="fas fa-power-off"></i>Logout</span>
</div>
</div>
<!--sidebar-->

can make some changes:
const caretButton = document.querySelectorAll(".list-item");
caretButton.forEach((el) =>
el.addEventListener("click", (event) => {
if (el.tagName === "LI") {
el.querySelector(".sub-menu").classList.toggle("show")
el.querySelector(".caret").classList.toggle("rotated")
}
})
);
.rotated {
transform: rotate(180deg)
}
<li class="list-item">
<span class="icon">
<i class="fas fa-chart-bar"></i>
</span>Services
<span class="caret fas fa-angle-down" />
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
Your HTML was with little mistakes and added one class 'rotated' and modified JS because there was a mistake when submenu was undefined because of parentElement attribute

make a hover dropdown menu in html

I know this question has been asked here before but nothing seems to solve my problem.
I have a traditional menu made with css and I am trying to tweak it slightly to show sub menus on hover. While I have the hover part working (button changes color when hovering), I do not seem to be able to get text to show up on hover. At this point I am worried to touch my code more because I will end up breaking something
here is what I have been able to have so far:
css3.style.default:
nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #34373d;
}
nav#sidebar a[aria-expanded="true"]::after {
content: '\f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li a:hover {
background: #B5B0B8;
}
nav#sidebar li a:hover i {
color: #060808;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
html:
<ul class="list-unstyled">
<li> <i class="icon-home"></i>{% trans 'Home Dashboard' %} </li>
<br>
<br>
<li > <i class="icon-chart"></i>{% trans 'Sales Analytics' %} </li>
<li > <i class="icon-chart"></i>{% trans 'Replenishment Analytics' %} </li>
<li> <i class="icon-chart"></i>{% trans 'Items Analytics' %}</li>
<li> <i class="icon-chart"></i>{% trans 'Supplier Analytics' %}</li>
<br>
<br>
<li> <i class="icon-padnote"></i>{% trans 'Supplier Replenishment' %}</li>
<li> <i class="icon-padnote"></i>{% trans 'Item Replenishment' %}</li>
<br>
<br>
<li> <i class="icon-padnote"></i>{% trans 'Supplier Base' %}</li>
<li> <i class="icon-padnote"></i>{% trans 'Item Base' %}</li>
</ul>
and the output in templates looks like this:
I am wondering what I need to do different to get that menu to be a hover over menu therefore having all of those buttons hidden unless the user hover over dashboard. Thanks

.fixedMenu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100vh;
width: 300px;
background: #F6C540;
}
.fixedMenu ul li {
list-style: none;
position: relative;
}
.fixedMenu ul li ul{
position: fixed;
background: red;
top: 0;
left: -300px;
bottom: 0;
width: 300px;
box-sizing: border-box;
z-index: 99;
transition: all 300ms ease-in-out;
}
.fixedMenu ul li:hover ul {
left: 0;
transition: all 300ms ease-in-out;
}
.fixedMenu a {
display: block;
padding: 20px;
color: #000;
text-deoration: none;
font-size: 18px;
z-index: 98;
}
<div class="fixedMenu">
<ul>
<li>Menu1
<ul>
<li>SubMenu1</li>
<li>SubMenu1</li>
</ul>
</li>
<li>Menu2
<ul>
<li>SubMenu2</li>
<li>SubMenu2</li>
</ul></li>
</ul>
</div>

Bootstrap sidebar and page content are merged

I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.
JS Fiddle
My code:
.nav-side-menu {
overflow: auto;
font-family:'Montserrat', sans-serif;
font-size: 12px;
font-weight: 200;
background-color: #FFF;
position: fixed;
top: 0px;
width: 250px;
height: 100%;
color: #000;
border-right:solid 1px black;
}
.nav-side-menu .brand {
background-color: #FFF;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.logoimg {
width: 70%;
margin-top: 20px;
background: url('logomedium.png');
background-size: 200px 133px;
height: 133px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left:20px;
background-position: center;
margin-bottom: 80px;
}
.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 #eeeeee;
background-color: #eeeeee;
}
.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: #eeeeee;
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;
text-align: center;
/*border-left: 3px solid #2e353d; */
padding-bottom: 15px;
padding-top: 15px;
/*border-bottom: 1px solid #23282e;*/
}
.nav-side-menu li a {
text-decoration: none;
font-size:12pt;
color: #000000;
text-transform: uppercase;
vertical-align: middle;
}
.nav-side-menu li a {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li a:focus {
outline: 0;
}
.nav-side-hr {
width: 75%;
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
.nav-side-menu li:hover {
/*border-left: 3px solid##eeeeee;*/
background-color: #eeeeee;
-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;
}
.logoimg {
margin-top: 10px;
background: url('logohorizontal.png');
background-size: 200px 48px;
height: 48px;
margin-bottom: 10px;
width: 200px;
/* margin-left:auto;
margin-right:auto; */
margin-left: 5px;
background-position: center;
}
.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: #AF2024;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
border-bottom: 1px solid black;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<div id="wrapper">
<!-- Sidebar -->
<div class="nav-side-menu">
<div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></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=""></i> About Us
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed">
<i class=""></i> Services
</li>
<li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class=""></i> Contact us
</li>
<li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</li>
<hr class="nav-side-hr" />
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class=""></i> RATES
</li>
<li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
</li>
<li>
<a href="#">
<i class=""></i> TRACKING SYSTEM
</a>
</li>
<li>
<a href="#">
<i class=""></i> QUOTE ME
</a>
</li>
<hr class="nav-side-hr" />
<li>
<a href="#">
<i class=""></i> FIND US
</a>
</ul>
</div>
</div>
<!-- End Sidebar -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering.
JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.
#media(min-width:768px) {
#page-content-wrapper {
padding-left: 250px;
position: relative;
}
}
Click here for a jsfiddle

Please add this in your css:
#media (min-width: 768px)
{
#page-content-wrapper
{
padding: 20px 20px 20px 250px;
position: relative;
}
}
Check this fiddle https://jsfiddle.net/y3eL6m8v/2/

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.

Span element does not run the animation from jQuery

I am trying to make a menu appear from right side by jQuery animation by clicking on a span which have runmenu class but it does not work , I made the same class for a button and it worked fine , what is the problem here and why it works for button only?!
$(document).ready(function() {
$(".runmenu").click(function() {
$(".menu").animate({
"right": 0
}, 1000);
});
});
/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>

It's all about z-index property and nothing wrong in your javascript. Your span.runmenu wasn't clickable because the navbar2 block was positioned over the span. Change the css and get the problem resolved.
give
.runmenu {
z-index: 999;
cursor: pointer;
}
.navbar .navbar_two {
z-index: 0;
}
See the fiddle
Preview
$(document).ready(function() {
$('span.runmenu').click(function() {
console.log("ok");
$(".menu").animate({
"right": 0
}, 1000);
});
});
/* Global*/
.runmenu {
z-index: 999;
cursor: pointer;
}
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
z-index: 0;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span>
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>

I did the same a few months ago, the best way is to insert the span inside a div and encourage div.
$(".animamenu").click(function () {
$(".animamenu").animate({
"right": 0
}, 1000);
});
html:
<div>
<i class="fa fa-bars fa-lg"></i>
<div class="animamenu">
<span class="runmenu">menu</span>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Issues with using Active class in Bootstrap - javascript

i dont know if i understood your question but i think what you want is this, #sidebar ul li.active>a, a[aria-expanded="true"] { color: #6d7fcc; background: #fff; }

Related

Submenu not opening on clicking arrow button , instead opens on clicking on the li tag i.e services

make a hover dropdown menu in html

Bootstrap sidebar and page content are merged

Bootstrap navbar (left menu) not aligned properly at top

Span element does not run the animation from jQuery

Categories

Resources