We Keep Coding

Bootstrap Navbar on mobile shows up behind everything else

Been using bootstrap to style my header contents but recently facing something weird. The navbar that toggles after tapping on the hamburger menu shows up behind all the components. The z-index is maxed yet it doesn't work.
Here's my HTML:
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<img src="{% static 'assets/img/logo-hi-res.png' %}" alt="" class="ActLogo img-fluid">
<h1 class="logo me-auto"><span>My</span>Website.</h1>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li>Home</li>
<li><span>About</span>
<li class="dropdown"><span>Services</span><i class="bi bi-chevron-down"></i>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
<li>Pricing</li>
<li>Contact</li>
<button class="clientBt btn btn-sm btn-primary mr-2">CLIENT LOGIN</button>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<div class="header-social-links d-flex">
<i class="bu bi-twitter"></i>
<i class="bu bi-facebook"></i>
<i class="bu bi-instagram"></i>
<i class="bu bi-linkedin"></i></i>
</div>
</div>
And the CSS:
#header {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: grayscale(0) contrast(3) blur(5px);
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header .logo {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
#header .logo a {
color: #d40b00;
}
#header .logo a span {
color: #2C3380;
}
#header .ActLogo {
width: 60px;
height: 60px;
margin-top: -24px;
margin-bottom: -20px;
margin-right: 10px;
}
/* Social Links */
.header-social-links {
margin-left: 20px;
border-left: 1px solid #c4c4c4;
}
.header-social-links a {
color: #a0a0a0;
display: inline-block;
line-height: 0px;
transition: 0.3s;
padding-left: 20px;
}
.header-social-links a i {
line-height: 0;
}
.header-social-links a:hover {
color: #e85a5d;
}
#media (max-width: 480px) {
.header-social-links {
padding: 0 15px 0 0;
border-left: 0;
}
#header a .ActLogo {
display: none;
width: 40px;
height: 40px;
}
#header .logo a {
color: #E64238;
}
#header .logo a span {
color: #2C3380;
}
#media (max-width: 1200px) {
#header a .ActLogo {
display: none;
}
}
}
#media (max-width: 1200px) {
.header-social-links {
padding: 0 15px 0 0;
border-left: 0;
}
#header .logo {
font-size: 23px;
}
#header a .ActLogo{
margin-top: -10px;
margin-bottom: -10px;
}
}
/* Nav Menu */
/* Desktop */
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Roboto", sans-serif;
font-size: 13px;
font-weight: 600;
color: #111;
white-space: nowrap;
text-transform: uppercase;
transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #565b99;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-top: 2px solid #373F94;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 10px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #111;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
color: #373F94;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
#media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
.clientBt{
color: white;
background-color: #2C3380;
border: none;
padding: 0px;
margin-left: 30px;
border-radius: 8px;
}
.clientBt:hover{
background-color: #4b56ce;
}
.clientBt a{
color: white;
padding: 10px;
}
.clientBt a:hover{
color: white;
}
/*Mobile Navigation*/
.mobile-nav-toggle {
color: #111;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
/* SWITCH TO MOBILE HEADER */
#media (max-width: 1200px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
transition: 0.3s;
z-index: 999;
height: auto;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
z-index: 9999;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #111;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #2C3380;
}
.navbar-mobile .getstarted {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 999;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
color: #2C3380;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
And the Script:
// Mobile nav toggle
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
// Mobile nav activate dropdown
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
If you want to see the error in action, head over here, see the mobile view and try to toggle the menu from the hamburger.

Had to make a couple adjustments, actually isn't a problem of z-index at all.
The nav element has an overflow-hidden attached to it. Remove it.
The ul has no height to it, add a min-height: fit-content;.
These 2 changes should make it work as you expect it to.

Responsive Hamburger Menu via jQuery

I am new to coding and am struggling to get the template for my nav menu ready. First of all, I want the hamburger to hide whenever I click on it and then the menu opens. However, I'm still at the beginning, and can't even get the hamburger to hide. I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.
this is the html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap" rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact Us</li>
<li class="nav-item">Links</li>
</ul>
</nav>
<div class="btn">
<a class="cta" href="#"><button>Hello World</button></a>
</div>
<img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
this is my CSS:
*{ /*Setting all to 0*/
padding:0;
margin:0;
box-sizing: border-box; /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}
header {
display: flex; /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
justify-content: space-between; /*justify-content + align-itmes = center ==> perfect center*/
align-items: center;
background-color: #707070;
padding: 30px 10%;
}
.logo {
font-family: "Montserrat", sans-serif;
font-weight: 800;
cursor: pointer;
}
button {
cursor: pointer;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); /* letzter ist alpha --> opacity, 1 = 100%*/
border: none;
border-radius: 50px;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.7); /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
text-decoration: none;
}
.btn a {
text-decoration: none;
}
.nav-item {
list-style: none;
}
.nav-item {
display: inline-block; /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
padding: 0px 30px;
}
.navbar li a {
transition: all 0.3s ease 0s; /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}
.navbar li a:hover {
color: #0088a9;
}
.nav-item a, button{
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: normal;
}
.hamburger {
height:40px;
cursor: pointer;
position:relative;
}
.hamburger:hover {
padding:2px;
border: 2px solid;
border-radius: 5px;
}
.hamburger-hide {
display:none;
}
#media (max-width: 768px){
.nav-list{
display: none;
}
.cta {
display: none;
}
}
#media (min-width:769px){
.hamburger{
display:none;
}
}
and this is the jQuery I tried, so that it hides on click.
$(".hamburger").click(function(){
$(".hamburger").toggleClass(".hamburger-hide");
})

Solution with jQuery for build up Hamburger navbar responsive
For my example:
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery);
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Contact Us
</li>
<li>
Link
</li>
</ul>
</ul>
</nav>
</div>
</section>
Updated
Solution 2, Using Pure CSS
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;
}
}
<header class="header">
Your Logo
<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>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
</header>

Here you go:
https://jsfiddle.net/ap2rzb5x/1/
$("#hamburger").click(function(){
$("#hamburger").toggleClass("hamburger-hide");
$("#hamburger").toggleClass("hamburger");
})
Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?). Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.
Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search. Same with #hamburger, it will find ID of hamburger not #hamburger-hide.
https://api.jquery.com/category/selectors/
Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.

On mobile I want my navbar to close when I click an ID

I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).
I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>130){
$(".nav-btn").addClass("fundal")
}
else{
$(".nav-btn").removeClass("fundal")
}
});
});
window.addEventListener('load', ()=> {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
});
$("ul").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
})
/* NAVBAR */
.navigatie{
background-color:transparent;
width:100%;
position: absolute;;
z-index: 99;
margin:0px;
padding:0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand{
color:white !important;
}
.navbar-brand img{
width: auto;
height: 100px;
margin:-32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top:5px;
margin-right:20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover{
color:#fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal{
background:#e04f45 !important;
box-shadow:1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color:#e04f45;
border-radius: 50%;
box-shadow:1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i{
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px){
.navigatie{
background-color:transparent;
width:100%;
position: absolute;
z-index: 99;
margin:0px;
padding:0px;
}
.navbar-brand img{
height:100px;
margin:-20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top:10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>

You could do that by changing a small thing in your JavaScript.
Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function
Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery
$(document).ready(function () {
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() > 130) {
$(".nav-btn").addClass("fundal");
console.log("add class", $(".nav-btn").hasClass("fundal"));
} else {
$(".nav-btn").removeClass("fundal");
console.log("remove class");
}
});
});
window.addEventListener("load", () => {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
// Updated the selector
$(".nav-wrapper li a").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
// Uncheck your checkbox
$("#nav").prop("checked", false)
});
.page {
background: #f00;
height: 500px;
margin-bottom: 10px;
}
/* NAVBAR */
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #e04f45 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal.nav-btn {
background-color: #e04f45;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal.nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display: block;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display: none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="page" id="home"></div>
<div class="page" id="despre"></div>
<div class="page" id="studii"></div>
<div class="page" id="abilitati"></div>
<div class="page" id="contact"></div>

Add CSS attribute on scroll function jQuery

I'm trying to create on scroll function, once the user scroll to certain point the menu add CSS background color attribute that appears.
But I'm having trouble, I believe I've used the correct scroll function usage, the syntax is also correct but the CSS() jQuery function doesn't goes to action as you can see in this codepen
How can I change CSS attribute once the user scrolling to certain point on the screen?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").css('background', 'blue');
} else {
$(".top-nav").css('background', 'transparent');
}
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width:1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width:1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: 'Rubik', sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1>
<a href="#" id="logo">
<span id="yd">yotam dahan</span>
<span class="logo-red">.</span>
<span id="com">COM</span>
</a>
</h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<a href="#!" id="burger-menu" onclick="toggleSideMenu()">
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</a>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>

The issue is because you've set overflow: scroll on the body element so the window isn't scrolling, the body is. As such the event handler is on the wrong element.
Also note that you should avoid putting CSS styling (as well as HTML) in your JS code. A better approach is using CSS classes. Then you can use toggleClass(). Try this:
jQuery($ => {
$('body').scroll(function () {
var scroll = $(this).scrollTop();
$('.top-nav').toggleClass('blue', scroll >= 100);
});
});
html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.main {
height: 2000px;
}
img {
width: 100%;
}
body {
background-color: #f7f7f7;
transition: margin-right 0.5s, margin-left 0.5s;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
display: grid;
transition: margin-right 0.5s, margin-left 0.5s;
}
.logo-red {
color: #005aa3;
font-size: 37px;
}
/* Top Nav Bar */
.top-nav {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
display: grid;
grid-template-columns: auto auto;
color: white;
}
.top-nav.blue {
background-color: blue;
}
.top-nav .nav-scroller {
background-color: blue;
}
.top-nav h1 {
padding-left: 3rem;
font-size: 1.6rem;
}
.top-nav div {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding-right: 4rem;
}
.top-nav ul {
list-style: none;
display: none;
}
.top-nav li {
display: inline-block;
padding: 0.7rem 1rem;
}
.top-nav div ul li a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
outline: none;
color: #fff;
transition: 0.5s all ease;
}
.top-nav div ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #0068bd;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.top-nav div ul li a:hover:after {
width: 100%;
left: 0;
}
/* Burger menu */
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
right: 0;
background-color: #36454f;
opacity: 1;
overflow-x: hidden;
padding: 60px 0;
transition: width 0.5s;
-webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
text-align: right;
font-size: 5vw;
margin: 0 20px;
color: white;
border-bottom: 2px #ccc solid;
display: block;
transition: 0.3s ease-in-out;
}
.side-nav a:hover {
color: #fff;
border-radius: 0.5rem;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 0;
font-size: 50px;
font-weight: bold;
border: none;
margin-left: 0;
}
#media (max-width: 1024px) {
.top-nav {
min-height: 4rem;
}
.top-nav div {
padding-right: 1rem;
}
.top-nav h1 {
padding-left: 1rem;
padding-top: 0.6rem;
}
}
#media (min-width: 1024px) {
#burger-menu {
display: none;
}
.top-nav ul {
display: inline;
margin: 0;
padding: 0;
}
.contact form {
width: 50vw;
}
.top-nav h1 {
padding-top: 0.3rem;
}
}
#yd {
font-family: "Rubik", sans-serif;
font-style: italic;
color: #bdbdbd;
}
#yd {
transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1><span id="yd">yotam dahan</span><span class="logo-red">.</span><span id="com">COM</span></h1>
<div>
<ul style="direction: rtl;">
<li>שירותים</li>
<li>תיק עבודות</li>
<li>שמור על קשר</li>
</ul>
<i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
שירותים
תיק עבודות
שמור על קשר
</div>
</div>
<div class="main"></div>

Close dropdown menu after clicking it

I created a hamburger drop down menu for my webpage. However I noticed the drop down menu does not close after clicking on one of the links. I did try to find solutions online but none of them work. Please help!
.header {
margin-top: 60px; /* only to clear the 'Full page' button in the snippet */
background-color: #000;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
/*border-right: 1px solid #f4f4f4;*/
text-decoration: none;
}
#rmb_call {
display: block;
padding: 20px 20px;
/*border-right: 1px solid #f4f4f4;*/
text-decoration: none;
}
#rmb_call:hover {
background-color: gray;
}
.header li a:hover {
background-color: gray;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #fff;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #fff;
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;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 410px;
}
.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;
}
#media (min-width: 994px) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
#rmb_call {
float: left;
}
#rmb_call:hover {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
<img id="scsLogo2" src="img/logo2.jpg" style="margin-top: 5px; margin-left:5px; height: 50px; width: 75px;" />
<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 data-toggle="collapse" data-target=".nav-collapse">Membership</li>
<li data-toggle="collapse" data-target=".nav-collapse">Certificates</li>
<li data-toggle="collapse" data-target=".nav-collapse">Highlights</li>
<li data-toggle="collapse" data-target=".nav-collapse">Events</li>
<li data-toggle="collapse" data-target=".nav-collapse"><span id="rmb_call" onclick="javascript:window.location.href='tel:'">Call Us</span></li>
</ul>
</header>

Since you tagged the question with JavaScript & jQuery....
You could do it by triggering a click event on the close button when you click on a menu item like this:
$('.menu').on('click', 'li', function(){
$('#menu-btn').trigger('click');
});
$('.menu').on('click', 'li', function(){
$('#menu-btn').trigger('click');
});
.header {
margin-top: 60px; /* only to clear the 'Full page' button in the snippet */
background-color: #000;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
/*border-right: 1px solid #f4f4f4;*/
text-decoration: none;
}
#rmb_call {
display: block;
padding: 20px 20px;
/*border-right: 1px solid #f4f4f4;*/
text-decoration: none;
}
#rmb_call:hover {
background-color: gray;
}
.header li a:hover {
background-color: gray;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #fff;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #fff;
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;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 410px;
}
.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;
}
#media (min-width: 994px) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
#rmb_call {
float: left;
}
#rmb_call:hover {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<img id="scsLogo2" src="img/logo2.jpg" style="margin-top: 5px; margin-left:5px; height: 50px; width: 75px;" />
<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 data-toggle="collapse" data-target=".nav-collapse">Membership</li>
<li data-toggle="collapse" data-target=".nav-collapse">Certificates</li>
<li data-toggle="collapse" data-target=".nav-collapse">Highlights</li>
<li data-toggle="collapse" data-target=".nav-collapse">Events</li>
<li data-toggle="collapse" data-target=".nav-collapse"><span id="rmb_call" onclick="javascript:window.location.href='tel:'">Call Us</span></li>
</ul>
</header>