We Keep Coding

Submenu of sidebar is not opening on click

Please check the codes and let me know , where i made the mistake that submenu of sidebar is not opening on click. Working code to my link is attached.https://codepen.io/TA0011/pen/yLjWwGQ. I tried to do but couldn't, I shall be highly obliged if you can help me in creating submenu of services which is initially kept hidden and i want to display on click by event listener method.
//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><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>Connect
</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-->

//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>Connect
</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-->
add to your li class='caret'

Add a class to the parent li element
<li class="withsub">
<a>
<span class="icon"><i class="fas fa-chart-bar"></i></span>
Services<span class="caret fas fa-angle-down"></span>
</a>
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
in the js get the li elements, then in the loop get the .sub-menu child element
const withSubButton = document.querySelectorAll(".withsub");
withSubButton.forEach((el) =>
el.addEventListener("click", (event) => {
const subMenu = el.querySelector(".sub-menu");
subMenu.classList.toggle("show");
});
);

Trying to position searchbar in nav

I made a nav bar, and I'm trying to add a search bar to it, but I can't seem to position it.
I'd like to have the search bar show on the right side of the nav bar without overlapping any of the other elements. I tried relative and absolute position but nothing so far.
Any help is very much appreciated, thank you! :)
Here's the codepen - version= https://codepen.io/Teamkhaleesi/pen/gOoNJJy
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html,
body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(236, 241, 236);
}
body {
margin-bottom: 0;
padding: 0;
}
.search-bar {
float: right;
width: 200px;
height: 40px;
}
.search-bar .search-icon {
position: absolute;
right: 0px;
/*adjust this*/
top: 0px;
/*adjust this*/
background-color: red;
}
nav {
width: 100%;
height: 140px;
background-color: #333;
color: #fff;
text-align: center;
}
nav p {
font-family: 'poppins';
color: white;
font-size: 40px;
line-height: 40px;
padding-top: 2%;
text-align: center;
}
nav ul {
margin: 0px auto;
display: inline-block;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: 'poppins';
text-transform: uppercase;
color: white;
font-size: 20px;
text-decoration: none;
padding: 0px 30px;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: rgb(215, 209, 209);
border-radius: 1%;
z-index: 1;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
}
nav ul li ul li a {
padding: 8px 10px;
color: black;
}
nav ul li ul li a:hover {
background-color: rgb(120, 118, 118);
transition: ease-in-out 0.2s;
}
<nav>
<p>Book PRESS</p>
<ul>
<li>Home</li>
<li>Books <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Authors <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Our Authors</li>
<li>Book Tours</li>
<li>Events</li>
</ul>
</li>
<li>About Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Our Team</li>
</ul>
<li>News</li>
</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
<li class="search-bar">
<form class="form"> <input type="text" name="Search" placeholder="Search"> <button type="submit"> </button> </form>
</li>
</li>
</nav>

I've tested your code and it already seems to be positioning the search bar to the right (I don't have enough reputation to comment so I have to reply here sorry)

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>

Issues with using Active class in Bootstrap

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

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.