We Keep Coding

Dropdown menu can't open in another browser

I have create sidebar menu with dropdown, dropdown menu is fine with browser that I used to develop website. But when I used another browser dropdown menu can't appear. Also notification menu can't show up when I hover on another browser.
Browser I used is Google Chrome
Here is Sidebar html
<li>Master Data
<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
<li> <i class="fa fa-user"></i> Data Supplier</li>
<li> <i class="fa fa-list"></i> Kategori RPC</li>
<li> <i class="fa fa-list"></i> List Part Alokasi</li>
<li> <i class="fa fa-laptop"></i> Daftar Hardware</li>
<li> <i class="fa fa-dollar"></i> Akun Transaksi</li>
<li> <i class="fa fa-pencil"></i> Business Note</li>
</ul>
</li>
Here is the CSS
/*
* ==========================================================
* SIDEBAR
* ==========================================================
*/
nav.side-navbar {
background: #fff;
min-width: 250px;
max-width: 250px;
color: #686a76;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
z-index: 9;
/*==== Sidebar Header ====*/
/*==== Sidebar Menu ====*/
/*==== Shrinked Sidebar ====*/
}
nav.side-navbar a {
color: inherit;
position: relative;
font-size: 0.9em;
}
nav.side-navbar a[data-toggle="collapse"]::before {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav.side-navbar a[aria-expanded="true"] {
background: #EEF5F9;
}
nav.side-navbar a[aria-expanded="true"]::before {
content: '\f107';
}
nav.side-navbar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav.side-navbar a .badge {
vertical-align: middle;
}
nav.side-navbar .sidebar-header {
padding: 30px 15px;
}
nav.side-navbar .avatar {
width: 55px;
height: 55px;
}
nav.side-navbar .title {
margin-left: 10px;
}
nav.side-navbar .title h1 {
color: #333;
}
nav.side-navbar .title p {
font-size: 0.9em;
font-weight: 200;
margin-bottom: 0;
color: #aaa;
}
nav.side-navbar span.heading {
text-transform: uppercase;
font-weight: 400;
margin-left: 20px;
color: #ccc;
font-size: 0.8em;
}
nav.side-navbar ul {
padding: 15px 0;
}
nav.side-navbar ul li {
/* submenu item active */
}
nav.side-navbar ul li a {
padding: 10px 15px;
text-decoration: none;
display: block;
font-weight: 300;
border-left: 4px solid transparent;
}
nav.side-navbar ul li a:hover {
background: #796AEE;
border-left: 4px solid #3b25e6;
color: #fff;
}
nav.side-navbar ul li li a {
padding-left: 50px;
background: #EEF5F9;
}
nav.side-navbar ul li.active > a {
background: #796AEE;
color: #fff;
border-left: 4px solid #3b25e6;
}
nav.side-navbar ul li.active > a:hover {
background: #796AEE;
}
nav.side-navbar ul li li.active > a {
background: #8e81f1;
}
nav.side-navbar ul li ul {
padding: 0;
}
nav.side-navbar.shrinked {
min-width: 90px;
max-width: 90px;
text-align: center;
}
nav.side-navbar.shrinked span.heading {
margin: 0;
}
nav.side-navbar.shrinked ul li a {
padding: 15px 2px;
border: none;
font-size: 0.8em;
color: #aaa;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
overflow: hidden;
text-overflow: ellipsis;
}
nav.side-navbar.shrinked ul li a[data-toggle="collapse"]::before {
content: '\f107';
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: auto;
right: 50%;
bottom: 0;
left: auto;
}
nav.side-navbar.shrinked ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
content: '\f106';
}
nav.side-navbar.shrinked ul li a:hover {
color: #fff;
border: none;
}
nav.side-navbar.shrinked ul li a:hover i {
color: #fff;
}
nav.side-navbar.shrinked ul li a i {
margin-right: 0;
margin-bottom: 2px;
display: block;
font-size: 1rem;
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
nav.side-navbar.shrinked ul li.active > a {
color: #fff;
}
nav.side-navbar.shrinked ul li.active > a i {
color: #fff;
}
nav.side-navbar.shrinked .sidebar-header .title {
display: none;
}
/* SIDEBAR MEDIAQUERIES ----------------------------------- */
#media (max-width: 1199px) {
nav.side-navbar {
margin-left: -90px;
min-width: 90px;
max-width: 90px;
text-align: center;
overflow: hidden;
}
nav.side-navbar span.heading {
margin: 0;
}
nav.side-navbar ul li a {
padding: 15px 2px;
border: none;
font-size: 0.8em;
color: #aaa;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
nav.side-navbar ul li a[data-toggle="collapse"]::before {
content: '\f107';
-webkit-transform: translateX(50%);
transform: translateX(50%);
position: absolute;
top: auto;
right: 50%;
bottom: 0;
left: auto;
}
nav.side-navbar ul li a[data-toggle="collapse"][aria-expanded="true"]::before {
content: '\f106';
}
nav.side-navbar ul li a:hover {
color: #fff;
border: none;
}
nav.side-navbar ul li a:hover i {
color: #fff;
}
nav.side-navbar ul li a i {
margin-right: 0;
margin-bottom: 5px;
display: block;
font-size: 1.6em;
color: #333;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
nav.side-navbar ul li.active > a {
color: #fff;
}
nav.side-navbar ul li.active > a i {
color: #fff;
}
nav.side-navbar .sidebar-header .title {
display: none;
}
nav.side-navbar.shrinked {
margin-left: 0;
}
.content-inner {
width: 100%;
}
.content-inner.active {
width: calc(100% - 90px);
}
}
I used bootstrap and template bootstrapious
Menu can show up when I used browser that I used to develop website
Menu and modal can't show up on another browser

Bootstrap - collapsed sidebar by default

I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:
HTML:
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Test</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Back to the article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
<div class="container-fluid">
<h2>Collapsible Sidebar Using Bootstrap 3</h2></div></div>
JS:
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass("active");
});
});
CSS:
.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;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
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 {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.
thanks for any hints..

I think that you have switch the parameter of active class, if so you can also eliminate the last mediaquery . Try this
.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;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar a,
#sidebar a:hover,
#sidebar a:focus {
color: inherit;
}
#sidebar {
margin-left:-250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
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 {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#content p a {
color:
}

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.

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>

Nav bar elements get hidden automatically

Here is my code. When i resize the screen size my navigation bar gets disabled instead of becoming a toggle menu
here is the codepen which i am working on
here is the code
var ww = document.body.clientWidth;
$(window).on('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
var togglemenu = $('.toggleMenu'),
navli = $(".nav li"),
navclass = $(".nav");
if (ww <= 1024) {
togglemenu.css("display", "inline-block");
if (!togglemenu.hasClass("active")) {
navclass.hide();
} else {
navclass.show();
}
navli.off('mouseenter mouseleave');
$(".nav li a.parent").off('click').on('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
} else if (ww >= 1024) {
togglemenu.css("display", "none");
navclass.show();
navli.removeClass("hover");
$(".nav li a").off('click');
navli.off('mouseenter mouseleave').on('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
.toggleMenu {
display: none;
float: right;
margin: 20px 5px 0 0;
}
.header-fixed {
position: fixed;
top: 0%;
z-index: 9999;
width: 100%;
display: block;
}
.header-fixed-responsive {
position: fixed;
top: 0%;
z-index: 9999;
width: 100%;
display: block;
-webkit-box-shadow: 0px 6px 28px -19px rgba(0, 0, 0, 0.98);
-moz-box-shadow: 0px 6px 28px -19px rgba(0, 0, 0, 0.98);
box-shadow: 0px 6px 28px -19px rgba(0, 0, 0, 0.98);
}
.nav {
list-style: none;
*zoom: 1;
position: relative;
float: right;
overflow: hidden;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
color: #5d5d5d;
color: #000;
font-weight: 500;
text-transform: uppercase;
}
.nav li {
float: left;
padding: 0px 0px;
}
.nav li a:hover,
.nav li a.active {
text-decoration: none;
background-color: transparent;
color: #fff;
-webkit-transition: .3s all ease-in;
-moz-transition: .3s all ease-in;
-ms-transition: .3s all ease-in;
-o-transition: .3s all ease-in;
}
.nav li a:focus {
background-color: transparent;
}
.nav li {
position: relative;
}
.nav>li {
float: left;
}
.nav>li>.parent {
background-image: url("images/downArrow.html");
background-repeat: no-repeat;
background-position: right;
}
.nav>li>a {
display: block;
padding: 24px 27px;
color: #5d5d5d;
padding-right: 55px;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav>li.hover>ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #5d5d5d;
position: relative;
z-index: 100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background: #249578;
z-index: 200;
border-top: 1px solid #1d7a62;
}
#navigation-menu a.mPS2id-highlight {
color: #fff;
}
#media screen and (max-width: 1024px) {
.toggleMenu {
display: block;
}
.active {
display: block;
}
.nav>li {
float: none;
}
.nav {
position: absolute;
width: 100%;
top: 62px;
left: 0;
display: none;
}
.nav li {
position: relative;
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block !important;
width: 100%;
background-color: #411d52;
}
.nav>li>a {
padding: 12px 27px;
}
.nav li:first-child {
border-top: 0px;
}
.nav li a,
.nav li a:hover,
.nav li a:focus {
color: #909090;
}
#navigation-menu a.mPS2id-highlight {
background-color: #fff;
color: #b50b13;
}
.nav>li>.parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.html");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
background-color: #900f12;
}
.nav>li.hover>ul,
.nav li li.hover ul {
position: static;
}
}
#media screen and (max-width: 768px) {
.nav {
top: 60px;
}
.nav>li>a {
display: block;
padding: 10px 15px !important;
}
}
#media screen and (max-width: 667px) {
.toggleMenu {
margin: 22px 0px 14px 0px;
}
}
#media screen and (max-width: 640px) {}
#media screen and (max-width: 480px) {
.nav {
top: 48px;
}
}
#media screen and (max-width: 375px) {
.toggleMenu {
margin: 14px 0px 0px 0px;
}
}
#media screen and (max-width: 320px) {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="menu page-scroll">
<div class="container">
<div class="logo">
<img alt="Logo" src="https://www.google.co.in/logos/doodles/2018/sir-mokshagundam-visvesvarayas-158th-birthday-5898812148154368-s.png" />
</div>
<div id="nav-icon3"></div>
<nav id="navigation-menu">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Schedule</li>
<li>Winners</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</div>
</header>