How to add active class onclick in Bootstrap collapsible sidenav

How to add active class onclick in Bootstrap collapsible sidenav - javascript

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>

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

menubar tooltip not showing for all elements

For my app I want to create a menu bar wil tooltips. It seems to work for my list icons, but not for my settings icon. I guess it has something to do with specifying my elements within CSS, but on the other hand I think something is wrong with my javascript code as well maybe. Can someone point me in the right direction perhaps?
const menu = document.querySelector(".menu"); // get menu item for click event
menu.addEventListener("click", function () {
expandSidebar();
showHover();
});
/**
* expand sidebar if it is short, otherwise collapse it
*/
function expandSidebar() {
document.querySelector("body").classList.toggle("short");
let keepSidebar = document.querySelectorAll("body .short");
if (keepSidebar.length === 1) {
localStorage.setItem("keepSidebar", "true");
} else {
localStorage.removeItem("keepSidebar");
}
}
/**
* show hover effect on sidebar
*/
function showHover() {
const li = document.querySelectorAll(".short .sidebar li");
if (li.length > 0) {
li.forEach(function (item) {
item.addEventListener("mouseover", function () {
const text = item.querySelector(".text");
text.classList.add("hover");
});
item.addEventListener("mouseout", function () {
const text = item.querySelector(".text");
text.classList.remove("hover");
});
});
}
}
function showHover2() {
const a = document.querySelectorAll(".short .sidebar .menusettings .settings a");
if (a.length > 0) {
a.forEach(function (item2) {
item2.addEventListener("mouseover", function () {
const text2 = item2.querySelector(".text2");
text2.classList.add("hover");
});
item2.addEventListener("mouseout", function () {
const text2 = item2.querySelector(".text2");
text2.classList.remove("hover");
});
});
}
}
/**
* check local storage for keep sidebar
*/
function showStoredSidebar() {
if (localStorage.getItem("keepSidebar") === "true") {
document.querySelector("body").classList.add("short");
showHover();
}
}
showStoredSidebar(); // show sidebar if stored in local storage
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
padding: 0;
margin: 0;
position: relative;
min-height: 100vh;
overflow: hidden;
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
.container {
display: flex;
flex-flow: row wrap;
}
.container .sidebar {
background-color: #333;
color: #fff;
width: 20%;
height: 100%;
padding: 0 1rem;
position: fixed;
top: 0;
left: 0;
transition: width 0.1s ease-in-out;
}
.container .sidebar a {
color: #fff;
text-decoration: none;
}
.container .sidebar .sidebartop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding-top: 1rem;
height: 55px;
width:100%;
}
.container .sidebar .sidebartop .logo {
width: 70%;
}
.container .sidebar .sidebartop .logo img {
height: auto;
width: 100%;
}
.container .sidebar .sidebartop .menu {
width:20%;
text-align: end;
}
.container .sidebar .sidebartop .menu i {
cursor: pointer;
font-size: 1.15rem;
}
.container .sidebar .sidebartop .logo-mobile {
display: none;
}
.container .sidebar nav ul {
padding: 0;
margin: 0;
list-style: none;
}
.container .sidebar nav ul li {
display: block;
align-items: center;
padding: 1.25rem 0;
position: relative;
background-color: transparent;
transition: background-color 0.25s ease-in-out;
}
.container .sidebar nav ul li a {
display: block;
}
.container .sidebar nav ul li a i {
font-size: 1.25rem;
}
.container .sidebar nav ul li a .text {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .menusettings .settings a .text2 {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .account {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
width: calc(100% - 2rem);
position: relative;
}
.container .sidebar .account .avatar {
margin-right: 1rem;
width: 20%;
}
.container .sidebar .account .avatar img {
border-radius: 50%;
height: 50px;
width: 50px;
margin-top: 2rem;
}
.container .sidebar .account .name {
flex: 1 1 auto;
margin-top: 2rem;
}
.container .sidebar .account .name h4 {
padding: 0;
margin: 0;
}
.container .sidebar .account .logout {
flex: 1 1 auto;
text-align: end;
margin-left:0.1rem;
margin-top: 2rem;
}
.container .sidebar .account .logout i {
font-size: 1.5rem;
}
.container .main {
margin-left: calc(30% + 2rem);
padding: 1rem;
}
.short .sidebar {
width: 2.5%;
text-align: center;
}
.short .sidebar .logo, .short .sidebar .text, .short .sidebar .avatar, .short .sidebar .name {
display: none;
}
.short .sidebar .sidebartop {
display: block;
height: 55px;
}
.short .sidebar .sidebartop .logo-mobile {
display: none;
}
.short .sidebar .sidebartop .menu {
width: 100%;
text-align: center;
}
.short .sidebar .text.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
.short .sidebar .text2.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
.short .sidebar .account {
display: block;
}
.short .sidebar .account .logout {
width: 100%;
text-align: center;
}
.short .main {
margin-left: calc(5% + 2rem);
}
nav {
position: relative;
height:25rem;
}
.container .menusettings .settings a {
display: block;
}
.container .menusettings .settings i {
font-size:1.25rem;
}
.menusettings .settings span {
margin-left:1rem;
}
.menusettings {
display: block;
position: relative;
margin-top:9rem;
}
/* Tooltip dashboard */
[tooltip] {
position: relative;
}
[tooltip]::before,
[tooltip]::after {
text-transform: none;
font-size: .8em;
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 2px solid transparent;
z-index: 1001;
}
[tooltip]::after {
content: attr(tooltip);
font-family: Helvetica, sans-serif;
text-align: center;
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
[tooltip='']::before,
[tooltip='']::after {
display: none ;
}
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
#keyframes tooltips-horz {
to {
opacity: 3.9;
transform: translate(0, -50%);
}
}
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease forwards;
}
.texteditor {
position: relative;
left:200px;
top:100px;
}
#media (max-width: 844px) {
.container .sidebar {
width: 5%;
text-align: center;
}
.container .sidebar .logo, .container .sidebar .text, .container .sidebar .avatar, .container .sidebar .name {
display: none;
}
.container .sidebar .sidebartop {
display: block;
height: auto;
}
.container .sidebar .sidebartop .logo-mobile {
display: block;
}
.container .sidebar .sidebartop .logo-mobile img {
height: auto;
width: 80%;
}
.container .sidebar .sidebartop .menu {
display: none;
}
.container .sidebar nav ul li {
padding: 0;
}
.container .sidebar nav ul li a {
padding: 0.6rem 0;
}
.container .sidebar .account {
display: block;
}
.container .sidebar .account .logout {
width: 100%;
text-align: center;
}
.container .main {
margin-left: calc(5% + 2rem);
}
}
#media (max-width: 390px) {
.container .sidebar {
width: 8%;
}
.container .sidebar nav ul li {
padding: 0;
}
.container .sidebar nav ul li a {
padding: 2rem 0;
}
.container .main {
margin-left: calc(8% + 2rem);
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="/Software/softwarenew.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebartop">
<div class="logo">
</div>
<div class="logo-mobile">
<img src="/images/mobile.svg" alt="">
</div>
<div class="menu">
<i class="bi bi-arrow-bar-right"></i>
</div>
</div>
<nav>
<ul>
<li><i class="bi bi-house"></i><span class="text">Home</span></li>
<li><i class="bi bi-pencil-square"></i><span class="text">Draft</span></li>
<li><i class="bi bi-sliders"></i><span class="text">CPQ</span></li>
<li><i class="bi bi-calendar"></i><span class="text">Calendar</span></li>
<li><i class="bi bi-receipt"></i><span class="text">Invoice</span></li>
</ul>
</nav>
<div class="menusettings">
<div class="settings">
<span tooltip="Settings" flow="right">
<i class="bi bi-gear"></i><span class="text">Settings</span>
</span>
</div>
<div class="account">
<div class="avatar">
<img src="/images/avatar.jpg" alt="">
</div>
<div class="name">
<h4>The DevDrawer</h4>
Adminstrator
</div>
<div class="logout">
<i class="bi bi-box-arrow-left"></i>
</div>
</div>
</div>
</div>
<div class="main">
[page content here]
</div>
</div>
<script src="/Software/softwarenew.js"></script>
</body>
</html>

You need to modify all your three files. The changes are below,
Modify class="text2" for Settings in html
<div class="settings">
<i class="bi bi-gear"></i><span class="text2">Settings</span>
</div>
Add function call to showHover2() in addEventListener in JS
menu.addEventListener("click", function () {
expandSidebar();
showHover();
showHover2();
});
Add the below codes in your css
#import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
color: #333;
padding: 0;
margin: 0;
position: relative;
min-height: 100vh;
overflow: hidden;
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
.container {
display: flex;
flex-flow: row wrap;
}
.container .sidebar {
background-color: #333;
color: #fff;
width: 20%;
height: 100%;
padding: 0 1rem;
position: fixed;
top: 0;
left: 0;
transition: width 0.1s ease-in-out;
}
.container .sidebar a {
color: #fff;
text-decoration: none;
}
.container .sidebar .sidebartop {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding-top: 1rem;
height: 55px;
width:100%;
}
.container .sidebar .sidebartop .logo {
width: 70%;
}
.container .sidebar .sidebartop .logo img {
height: auto;
width: 100%;
}
.container .sidebar .sidebartop .menu {
width:20%;
text-align: end;
}
.container .sidebar .sidebartop .menu i {
cursor: pointer;
font-size: 1.15rem;
}
.container .sidebar .sidebartop .logo-mobile {
display: none;
}
.container .sidebar nav ul {
padding: 0;
margin: 0;
list-style: none;
}
.container .sidebar nav ul li {
display: block;
align-items: center;
padding: 1.25rem 0;
position: relative;
background-color: transparent;
transition: background-color 0.25s ease-in-out;
}
.container .sidebar nav ul li a {
display: block;
}
.container .sidebar nav ul li a i {
font-size: 1.25rem;
}
.container .sidebar nav ul li a .text {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .menusettings .settings a .text2 {
position: relative;
left: 1rem;
top: -0.2rem;
}
.container .sidebar .account {
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
width: calc(100% - 2rem);
position: relative;
}
.container .sidebar .account .avatar {
margin-right: 1rem;
width: 20%;
}
.container .sidebar .account .avatar img {
border-radius: 50%;
height: 50px;
width: 50px;
margin-top: 2rem;
}
.container .sidebar .account .name {
flex: 1 1 auto;
margin-top: 2rem;
}
.container .sidebar .account .name h4 {
padding: 0;
margin: 0;
}
.container .sidebar .account .logout {
flex: 1 1 auto;
text-align: end;
margin-left:0.1rem;
margin-top: 2rem;
}
.container .sidebar .account .logout i {
font-size: 1.5rem;
}
.container .main {
margin-left: calc(30% + 2rem);
padding: 1rem;
}
.short .sidebar {
width: 2.5%;
text-align: center;
}
.short .sidebar .logo, .short .sidebar .text, .short .sidebar .avatar, .short .sidebar .name {
display: none;
}
.short .sidebar .menusettings .text2 {
display: none;
}
.short .sidebar .sidebartop {
display: block;
height: 55px;
}
.short .sidebar .sidebartop .logo-mobile {
display: none;
}
.short .sidebar .sidebartop .menu {
width: 100%;
text-align: center;
}
.short .sidebar .text.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: 1rem;
border-radius: 0.25rem;
}
.short .sidebar .menusettings .settings .text2.hover {
display: block !important;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 0.5rem;
box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
position: absolute;
left: 4rem;
top: -0.5rem;
border-radius: 0.25rem;
}
.short .sidebar .account {
display: block;
}
.short .sidebar .account .logout {
width: 100%;
text-align: center;
}
.short .main {
margin-left: calc(5% + 2rem);
}
nav {
position: relative;
height:25rem;
}
/* .container .menusettings .settings a {
display: block;
} */
.container .menusettings .settings i {
font-size:1.25rem;
}
.menusettings .settings span {
margin-left:0rem;
}
.container .menusettings {
display: block;
position: relative;
margin-top:9rem;
}
Hope it helps.

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 make an active element in dropdowns with html, css, bootstrap

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

mobile view issue when the menu opened?

when opening the menu and scroll down the navbar still move
I want when open the menu prevents the scroll
I implemented the below code for responsive navbar but I'm facing an issue on the mobile view only
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
any help on that issue, please
note: i hide the banner above the navbar on the mobile view but on the big screen view not hidden

Add 'overflow:hidden' to body when menu is open. it will solve your problem.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
$('body').css('overflow', 'hidden');
}
else
{
$('nav').removeClass('fixed');
$('body').css('overflow', 'auto')
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
left:0;
/* bottom:0;
overflow:auto; */ /* if you want scroll inside menu */
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
top:0;
left:0;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to add active class onclick in Bootstrap collapsible sidenav - javascript

Related

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

menubar tooltip not showing for all elements

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 make an active element in dropdowns with html, css, bootstrap

mobile view issue when the menu opened?

Categories

Resources