how to make an active element in dropdowns with html, css, bootstrap

how to make an active element in dropdowns with html, css, bootstrap - javascript

I have provided a snippet, however the output is different from here and so please beware. I am trying to achieve where:
When the user clicks 'Home 1' under 'Home', it will be an active element
In addition, when the user clicks 'Home 2', 'Home 1' will be inactive and 'Home 2' will be an active element
Same goes for the 'Pages' dropdown list. May I know what are the solutions?
/*
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: #6d7fcc;
background: #fff;
}
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>
<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="#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>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
</div>
</div>
</body>
</html>

try this use jquery to control style
https://codepen.io/anon/pen/ZVbVYw
$(document).ready(function () {
$('#homeSubmenu li, #pageSubmenu li').on('click', function () {
$('#homeSubmenu li, #pageSubmenu li').removeClass('active');
$(this).addClass('active');
});
});

Related

How can I make the social links in my mobile menu fit together on one line?

I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>

Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css

How can I fix the look of child 1 under a dropdown navbar?

How can I fix the look of child 1 under dropdown NavBar? Also, how easy is it to change this into a flexbox, and make a button to make the code less cluttered via JavaScript?
I want the #dropDown as the parent navbar item and #child as the child of that navbar item. without a large white space bar (please run the code in full screen to see)
Also, I would like the bar to be visible on mobile. Some elements show up, but the Contact does not show up.
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
CSS Nav
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Our Work</li>
<li>
dropDown
<ul>
<li>child 1</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>

How to keep the social links on the navigation bar when the page shrinks, and also how to place social icons on same line when hamburger menu is open

I am trying to create a responsive web page navigation bar. I want the logo on the left, the navigation links center, and social media links on the right. When the page width gets too small, it is supposed to hide the navigation links and social media links. This is effectively working correctly however the social media links are jumping below the navigation bar when the page is too narrow but before it reaches full "mobile" width. Also, I am having trouble placing the social links in one line when the hamburger menu is open. I am not a web developer, just a tutorial watcher and any help would be greatly appreciated.
I have tried changing the class type for the .social class but this seems to only make matters worse.
EDIT: I solved the overflow problem by adding "overflow: hidden;" under ".navbar ul{"
const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");
navbarToggler.addEventListener("click", navbarTogglerClick);
function navbarTogglerClick() {
navbarToggler.classList.toggle("open-navbar-toggler");
navbarMenu.classList.toggle("open");
}
navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));
function navbarLinkClick() {
if(navbarMenu.classList.contains("open")) {
navbarToggler.click();
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Righteous', cursive;
background-color: #fff;
color: #333;
}
.navbar {
background-color: #000;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.2);
width: 100%;
height: 80px;
line-height: 80px;
font-size: 18px;
padding: 0 30px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.navbar a {
text-decoration: none;
color: #fff;
}
.navbar a.navbar-brand {
float: left;
height: inherit;
line-height: inherit;
padding: 0 30px;
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 28px;
font-weight: 700;
}
.navbar ul {
float: center;
list-style: none;
height: inherit;
line-height: inherit;
padding: 0 50px;
overflow: hidden;
}
/*Social Stuff*/
.social{
float: right;
background-color: coral;
font-size: 35px;
display: inline-block;
}
/*Social Stuff*/
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
display: block;
text-align: center;
min-width: 120px;
padding: 0 30px;
}
.navbar ul li a:hover {
background-color: transparent;
color:#00e713;
transition:0.2s all;
transform:scale(1.2) rotate(10deg);
}
.navbar .navbar-toggler {
display: none;
}
.intro {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/GYQBryEWh0Y/") no-repeat center center;
background-size: cover;
background-color: #000;
}
.container {
position: relative;
height: 100vh;
color: #fff;
}
.container h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20vh;
}
#html { background-color: #e34f26; }
#css { background-color: #002561; }
#javascript { background-color: #333; }
#media (max-width: 991px) {
.navbar ul {
padding: 0 10px;
}
.navbar ul li a {
min-width: 100px;
padding: 0 20px;
}
#media (max-width: 767px) {
.navbar a.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar {
padding: 0;
}
.navbar ul {
width: 100%;
padding: 0;
background-color: rgba(0,0,0,0.9);
/*height: auto; */
height: 100vh;
max-height: 0;
overflow: hidden;
transition: all ease-in-out 0.3s;
}
.navbar ul.open {
max-height: 100vh;
/*this next line prevents the navbar overlap on mobile */
padding-block-start: 9vh;
}
/*Social Stuff*/
.social{
width: 100%;
float: left;
text-align: center;
}
.social ul li{
display: inline;
float: left;
}
/*Social Stuff*/
.navbar ul li {
width: 100%;
/*border-bottom: 1px solid rgba(255,255,255,0.3); */
}
.navbar ul li a {
padding: 0px;
}
.navbar .navbar-toggler {
display: block;
position: absolute;
height: 40px;
top: 20px;
left: 20px;
background-color: transparent;
color: #fff;
/* border: 3px solid #fff;*/
border: none;
/* border-radius: 4px; */
outline: none;
padding: 0 5px;
cursor: pointer;
}
.navbar .navbar-toggler span,
.navbar .navbar-toggler span::before,
.navbar .navbar-toggler span::after {
display: block;
content: '';
background-color: #fff;
height: 3px;
width: 28px;
border-radius: 4px;
transition: all ease-in-out 0.3s;
}
.navbar .navbar-toggler span::before {
transform: translateY(-8px);
}
.navbar .navbar-toggler span::after {
transform: translateY(5px);
}
.navbar .navbar-toggler.open-navbar-toggler span {
/* transform: rotate(90deg); */
background-color: transparent;
/* transform: scale(0.85) rotate(270deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::before {
transform: translateY(0px) rotate(45deg);
/* transform: translateY(0px) scale(0.75) rotate(45deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::after {
transform: translateY(-3px) rotate(-45deg);
/* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Navbar</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar">
<button class="navbar-toggler">
<span></span>
</button>
<a href="#" class="navbar-brand">
<span>T</span>e<span>m</span>P</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<div class="social">
<li><i class ="fa fa-twitch"></i></li>
<li><i class ="fa fa-reddit"></i></li>
<li><i class ="fa fa-twitter"></i></li>
<li><i class ="fa fa-youtube"></i></li>
</div>
</ul>
</nav>
<script src="assets/js/script.js"></script>
</body>
<p>
</p>
</html>

First, you should decide your layout at what breakpoint you want to change the layout of navigation based on that we can write your styles within those media queries. Those things which you don't need on the mobile layout such as social links you can simply make display: none; to the social section but only in the mobile media query.

Actually your HTML structure is messy but anyhow, update this style in media query #media (max-width: 767px)
.social li {
width: auto;
margin-right: -18px;
float: none
}

How to add active class onclick in Bootstrap collapsible sidenav

I am trying to add/ remove active class in bootstrap collapsible sidenav on click. If i click on specific tab, it should be active until i switch to another tab. Have tried with addclass/ removeclass, but no change in html onclick. In my example id adds "active" but does't remove from other elements. Could anyone suggest how to achieve this.
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #dde4e8;
color: #000;
transition: all 0.3s;
}
#sidebar.active {
min-width: 100px;
max-width: 100px;
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 icon{
display:none;
}
#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: 24px;
background: #dde4e8;
border-bottom: 1px solid #c60429 ;
}
#sidebar .sidebar-header1{
padding: 20px;
background: #dde4e8;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #c60429 ;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #c60429 ;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #c60429;
}
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: #c60429;
}
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: #c60000;
}
a.article,
a.article:hover {
background: #c60429 !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: 130px;
max-width: 130px;
text-align: center;
margin-left: -130px !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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="sidebar">
<div class="sidebar-header ">
<h3><img src="/logo2.png" class="img-fluid flex-center"></h3>
<strong><img src="/logo1.png" class="img-fluid flex-center"></strong>
</div>
<div class="sidebar-header1">
</div>
<ul class="list-unstyled components">
<li class ="active">
<a href="/" >
<i class="fas fa-home"></i>
<icon>Home</icon>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
<icon>Organizations</icon>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-pie"></i>
<icon>Reports</icon>
</a>
</li>
</ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
</button>

Use
$('#sidebar ul li').on('click', function () {
$('#sidebar ul .active').removeClass('active');
$(this).addClass('active');
});
See snippet:
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
$('#sidebar ul li').on('click', function () {
$('#sidebar ul .active').removeClass('active');
$(this).addClass('active');
});
});
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #dde4e8;
color: #000;
transition: all 0.3s;
}
#sidebar.active {
min-width: 100px;
max-width: 100px;
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 icon{
display:none;
}
#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: 24px;
background: #dde4e8;
border-bottom: 1px solid #c60429 ;
}
#sidebar .sidebar-header1{
padding: 20px;
background: #dde4e8;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #c60429 ;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #c60429 ;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #c60429;
}
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: #c60429;
}
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: #c60000;
}
a.article,
a.article:hover {
background: #c60429 !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: 130px;
max-width: 130px;
text-align: center;
margin-left: -130px !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;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav id="sidebar">
<div class="sidebar-header ">
<h3><img src="/logo2.png" class="img-fluid flex-center"></h3>
<strong><img src="/logo1.png" class="img-fluid flex-center"></strong>
</div>
<div class="sidebar-header1">
</div>
<ul class="list-unstyled components">
<li class ="active">
<a href="/" >
<i class="fas fa-home"></i>
<icon>Home</icon>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
<icon>Organizations</icon>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-pie"></i>
<icon>Reports</icon>
</a>
</li>
</ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
</button>

Here you bind the event to wrong element. You should bind to #sidebar ul > li instead of the other #sidebarCollapse.
Before that, you must also toggle any .active element at that time before toggle another one.
$(document).ready(function () {
$('#sidebar ul > li').on('click', function () {
$('#sidebar ul > li.active').toggleClass('active');
$(this).toggleClass('active');
});
});
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #dde4e8;
color: #000;
transition: all 0.3s;
}
#sidebar.active {
min-width: 100px;
max-width: 100px;
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 icon{
display:none;
}
#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: 24px;
background: #dde4e8;
border-bottom: 1px solid #c60429 ;
}
#sidebar .sidebar-header1{
padding: 20px;
background: #dde4e8;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #c60429 ;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #c60429 ;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #c60429;
}
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: #c60429;
}
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: #c60000;
}
a.article,
a.article:hover {
background: #c60429 !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: 130px;
max-width: 130px;
text-align: center;
margin-left: -130px !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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="sidebar">
<div class="sidebar-header ">
<h3><img src="/logo2.png" class="img-fluid flex-center"></h3>
<strong><img src="/logo1.png" class="img-fluid flex-center"></strong>
</div>
<div class="sidebar-header1">
</div>
<ul class="list-unstyled components">
<li class ="active">
<a href="/" >
<i class="fas fa-home"></i>
<icon>Home</icon>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
<icon>Organizations</icon>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-pie"></i>
<icon>Reports</icon>
</a>
</li>
</ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
</button>

CSS transition inline menu

I need to do inline menu with transition.
I tried to recode some example into my requirement, but I have a problem with a:hover class - maybe some problem in js class.
But I have no idea how to get a red background under the main link (dropdbtn class) while I scrolling to submenu.
$(document).ready(function() {
console.log("ready!");
$(".dropdown-content").mouseenter(function() {
$(this).prev().addClass('href-hovered');
})
$(".dropdown-content").mouseleave(function() {
$(this).prev().removeClass('href-hovered');
})
});
.nav {
width: 1200px !important;
height: 50px;
padding-bottom: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
}
.nav a.dropbtn {
display: block;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
}
.nav a.dropbtn:hover {
display: block;
//padding:20px 40px;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
background: red;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.dropdown {
float: left;
background: white;
position: relative;
width: 170px;
min-height: 50px;
}
.dropdown > a {
color: black;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown > a:hover {
color: black;
background: red;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown .dropdown-content {
position: absolute;
transform: translate3d(0, -100%, 0);
transition: transform .2s ease-in;
z-index: -1;
left: 0;
}
.dropdown:hover .dropdown-content {
transform: translate3d(0, 0, 0);
transition-duration: .4s;
transition-timing-function: ease-out;
z-index: 1;
}
.dropdown-content {
background: red;
list-style: none;
width: 170px;
white-space: nowrap;
}
.dropdown-content a {
display: block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
z-index: 100 !important;
}
.nav .red {
color: #ff6600;
font-family: 'webfont';
font: 1.8em;
}
.nav .green {
color: #00cccc;
font-family: 'webfont';
}
.nav a:hover .red {
color: white;
padding-top: 20px;
font-family: 'webfont';
}
.nav a:hover .green {
color: white;
font-family: 'webfont';
}
.nav a.dropbtn.href-hovered .green {
color: white;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a.dropbtn.href-hovered .red {
color: white;
padding-top: 20px;
z-index: 2;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a:hover .red,
a:hover .green {
color: white;
font-family: 'webfont';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul>
<li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a>
<ul class="dropdown-content">
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
</ul>
</li>
</ul>
<nav>

As Mihailo said, your menu is kind of chaotic and overly complex. But to achieve your requirement, just change the style definition
nav a.dropbtn:hover
to
nav:hover a.dropbtn
to have the rule applied when the nav block itself is hovered.

Just added background-color: red; to .nav a.dropbtn. If im correct in understanding this is what you want right?

Develop Reference

JavaScript is the programming language of the Web.

how to make an active element in dropdowns with html, css, bootstrap - javascript

try this use jquery to control style https://codepen.io/anon/pen/ZVbVYw $(document).ready(function () { $('#homeSubmenu li, #pageSubmenu li').on('click', function () { $('#homeSubmenu li, #pageSubmenu li').removeClass('active'); $(this).addClass('active'); }); });

Related

How can I make the social links in my mobile menu fit together on one line?

How can I fix the look of child 1 under a dropdown navbar?

How to keep the social links on the navigation bar when the page shrinks, and also how to place social icons on same line when hamburger menu is open

How to add active class onclick in Bootstrap collapsible sidenav

CSS transition inline menu

Categories

Resources