We Keep Coding

menu not expanding,show or pop up? on click in mobile view

For some reason, the ul list is not expanding in mobile view, not sure what I did wrong. Can someone take a look at let me know? Thanks!
HTML:
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>
<li class="dropdown"><span>Drop Down</span> <i class="bi bi-chevron-down"></i>
<ul>
<li>Drop Down 1</li>
<li class="dropdown"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i>
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><a class="getstarted scrollto" href="#about">Get Started</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
CSS:
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
#media (max-width: 991px) {
.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(40, 58, 90, 0.9);
transition: 0.3s;
z-index: 999;
}
.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;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
}
Javascript:
/**
* 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');
is it on javascript?
on css im trying to 'possition: relative" it's show but not a pop up list container and joined with the div navbar. trying to add z-index nd nothing....

Why does my header not stick to the top of my page

.navigation {
color: var(--var-color-two);
font-family: "Kanit-medium", sans-serif;
font-style: normal;
font-size: 26px;
height: 1500px;
padding-top: 42px;
padding-left: 250px;
position: sticky;
top: 0;
}
.logo {
display: inline-block;
font-size: 30px;
}
.nav-links {
position: relative;
display: inline-block;
left: 12rem;
}
.nav-item {
display: inline-block;
margin: 0 18px;
}
<div id="header">
<div class="navigation">
<ul class="logo">
<li>
<a class="home" href="index.html">HOME</a>
</li>
</ul>
<ul class="nav-links">
<li class="nav-item">
<a class="ebay" href="Pages/Page1.html">Page1</a>
</li>
<li class="nav-item">
<a class="stock" href="Pages/Page2.html">Page2</a>
</li>
<li class="nav-item">
<a class="drop" href="Pages/Page3.html">Page3</a>
</li>
<li class="nav-item">
<a class="pricing" href="Pages/Page4.html">Page4</a>
</li>
</ul>
</div>
</div>
I have tried making the .navigation sticky, fixed, etc. The header doesn't seem to stick on the top of the page when I scroll down. Any ideas why it isn't sticking to the top of the page even though i did everything right? I don't mind adding Java Script if it is necessary.
EDIT:
I have tried adding sticky and top: 0; to the #header too, it doesn't work.

The reason why it does not work is very simple, you need to apply the sticky to the #header on the structure you have, why? the sticky property depends on the overflow and the ability to scroll on the parent element, the sticky property becomes sticky when the height of the element is passed. here is a page with a more in detail explanation https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
also a little test. I can not go in to much detail on the property on this comment, please read the page above.
body{
height: 800px;
}
#header {
color: var(--var-color-two);
font-family: "Kanit-medium", sans-serif;
font-style: normal;
font-size: 26px;
width: 100%;
height: auto;
padding-top: 42px;
padding-left: 250px;
position: sticky;
top: 0;
background-color:red;
display: flex;
}
.logo {
display: inline-block;
font-size: 30px;
}
.nav-links {
position: relative;
display: inline-block;
left: 12rem;
}
.nav-item {
display: inline-block;
margin: 0 18px;
}
<div id="header">
<nav class="navigation">
<ul class="logo">
<li>
<a class="home" href="index.html">HOME</a>
</li>
</ul>
<ul class="nav-links">
<li class="nav-item">
<a class="ebay" href="Pages/Page1.html">Page1</a>
</li>
<li class="nav-item">
<a class="stock" href="Pages/Page2.html">Page2</a>
</li>
<li class="nav-item">
<a class="drop" href="Pages/Page3.html">Page3</a>
</li>
<li class="nav-item">
<a class="pricing" href="Pages/Page4.html">Page4</a>
</li>
</ul>
</nav>
</div>

How to override inline style which is set in javascript with CSS Hover?

I'm using some font awesome icons in an element inside a href. The color of these has to be set in javascript, based on some conditions. Which works fine, BUT on :hover only the href text changes color, even though the color is set to !important in CSS.
If I remove the inline color set in JS for the icons it works fine with :hover.
Shouldn't !important override the inline style set in js?
My element where iconcolor is the issue:
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
Removing the elem.iconcolor and not setting any color in JS works, but then again I won't be able to add color on conditions.
And my CSS:
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
/*color: inherit;*/
text-decoration: none;
background-color: rgba(0,122,255,255); /*Color on nav items on hover */
background-image: none;
color: white !important;
}
I'm using bootstrap 2.3.2 on top of this.
Full html structure:
/*
#embeda013f208-3363-a68f-3b07-1a1824410343_0 ul.nav li.dropdown > ul.dropdown-menu
set to display:block when editing in browser, to see changes instantly.
*/
#navigationDiv {
/*margin-top: 46px;*/
position: -webkit-sticky; /* Safari */
position: sticky;
top: 46px;
font-family: inherit;
font-weight: 300;
}
.navbar-inner {
box-shadow: none;
border-radius: 0px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown > ul.dropdown-menu {
display: none;
}
navbar sticky-top navbar-light bg-light {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 46px;
}
/*#novobarcontainer{
position:absolute;
top:0px;
left:0px;
}*/
.navbar {
margin-bottom: 20px;
overflow: visible;
position: fixed;
top: 46px;
left: 0px;
width: 100%;
z-index: 1;
}
.dropdown-menu > li > a {
border-bottom: none;
padding: 7px 20px;
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
padding: 0px 0px 0px 0px;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
color: inherit;
text-decoration: none;
background-color: rgba(0,122,255,255); /*Color on nav items on hover */
background-image: none;
color: white;
}
.dropdown-submenu > .dropdown-menu {
border-radius: 0;
margin-top: 0px;
margin-left: 1px;
}
/*This is the color on the small arrow on the submenu*/
.dropdown-submenu > a:after {
border-left-color: black;
}
.dropdown-submenu > a:after:hover {
border-left-color: white;
}
/* change color on hover root element*/
.navbar .nav > li > a {
color: black;
text-shadow: none;
}
.navbar .nav > li > a:hover {
color: white;
background-color: rgba(0,122,255,255);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/regular.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<div id="navigationDiv" class="navbar-inner"><ul class="nav navbar-nav" id="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#undergrad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>UnderGrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#art.undergrad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#classic.art.undergrad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>classic.art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hey"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>hey </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul></div>

:hover will always overwrite element styling. Setting a:hover { color: inherit; }; in css to overwrite font-awesomes css should do the trick.

Enable links of the menu when the default action was prevented

I have the following situation:
jQuery(document).ready(function($) {
"use strict";
function active_menu(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
if (!$this.is(':animated')) { // to prevent double click issue
$this.toggleClass('active');
}
}
$(document).on('click', '.menu-item-has-children', active_menu);
});
nav {
position: relative;
display: inline-block;
top: auto;
overflow: visible;
background-color: transparent;
}
nav > ul {
list-style: none;
margin: 14px 0 0 0;
float: right;
position: relative;
}
nav > ul > li {
float: left;
min-width: 0;
position: relative;
}
nav > ul > li.menu-item-has-children:before {
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
width: 7px;
height: 7px;
position: absolute;
right: -4px;
bottom: 7px;
background-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
nav > ul > li a {
color: #1c1c1c;
font-weight: 400;
font-size: 13px;
text-transform: uppercase;
text-align: center;
display: inline-block;
padding-bottom: 4px;
margin: 0;
padding: 0 20px;
}
nav > ul > li span {
display: inline-block;
}
nav > ul ul {
display: none;
list-style: none;
position: absolute;
background: #fff;
border: 1px solid #e1e1e1;
margin: 0;
min-width: 200px;
margin-top: 33px;
z-index: 2001;
}
nav > ul > li > ul:before {
content: "";
display: block;
position: absolute;
width: 200px;
min-width: 200px;
height: 36px;
top: -36px;
left: 0;
z-index: 2004;
}
nav > ul li.active > ul {
display: block;
z-index: 2003;
}
nav > ul ul li {
position: relative;
}
nav > ul ul li a {
width: 100%;
text-align: left;
padding: 6px 13px 7px 13px;
}
nav > ul ul ul {
position: absolute;
left: 100%;
top: 0;
margin-left: 10px;
margin-top: 0;
z-index: 2002;
border: 1px solid #e1e1e1;
}
nav > ul ul ul:before {
position: absolute;
content: "";
top: 0;
left: -11px;
width: 11px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<ul id="main_menu">
<li id="nav-menu-item-1636" class="main-menu-item menu-first menu-item-type-custom menu-item-object-custom">
<a href="http://wpthemetestdata.wordpress.com/" class="menu-link main-menu-link">
<span>Home</span>
</a>
</li>
<li id="nav-menu-item-1637" class="main-menu-item">
<a href="#/?page_id=703" class="menu-link main-menu-link">
<span>Blog</span>
</a>
</li>
<li id="nav-menu-item-1638" class="main-menu-item">
<a href="#/?page_id=701" class="menu-link main-menu-link">
<span>Front Page</span>
</a>
</li>
<li id="nav-menu-item-1639" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=2" class="menu-link main-menu-link">
<span>About The Tests</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1697">
<a href="#/?page_id=1133" class="menu-link sub-menu-link">
<span>Page Image Alignment</span>
</a>
</li>
<li id="nav-menu-item-1698">
<a href="#/?page_id=1134" class="menu-link sub-menu-link">
<span>Page Markup And Formatting</span>
</a>
</li>
<li id="nav-menu-item-1640">
<a href="#/?page_id=501" class="menu-link sub-menu-link">
<span>Clearing Floats</span>
</a>
</li>
<li id="nav-menu-item-1641">
<a href="#/?page_id=155" class="menu-link sub-menu-link">
<span>Page with comments</span>
</a>
</li>
<li id="nav-menu-item-1642">
<a href="#/?page_id=156" class="menu-link sub-menu-link">
<span>Page with comments disabled</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1643" class="main-menu-item menu-item-has-children has_children">
<a href="#/?page_id=174" class="menu-link main-menu-link">
<span>Level 1</span>
</a>
<ul class="navi first menu-depth-1">
<li id="nav-menu-item-1644" class=" menu-item-has-children has_children">
<a href="#/?page_id=173" class="menu-link sub-menu-link">
<span>Level 2</span>
</a>
<ul class="navi navi menu-depth-2">
<li id="nav-menu-item-1645" class=" navi ">
<a href="#/?page_id=172" class="menu-link sub-menu-link">
<span>Level 3</span>
</a>
</li>
<li id="nav-menu-item-1699" class=" navi ">
<a href="#/?page_id=746" class="menu-link sub-menu-link">
<span>Level 3a</span>
</a>
</li>
<li id="nav-menu-item-1700" class=" navi ">
<a href="#/?page_id=748" class="menu-link sub-menu-link">
<span>Level 3b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1701">
<a href="#/?page_id=742" class="menu-link sub-menu-link">
<span>Level 2a</span>
</a>
</li>
<li id="nav-menu-item-1702">
<a href="#/?page_id=744" class="menu-link sub-menu-link">
<span>Level 2b</span>
</a>
</li>
</ul>
</li>
<li id="nav-menu-item-1646" class="main-menu-item">
<a href="#/?page_id=146" class="menu-link main-menu-link">
<span>Lorem Ipsum</span>
</a>
</li>
<li id="nav-menu-item-1703" class="main-menu-item">
<a href="#/?page_id=733" class="menu-link main-menu-link">
<span>Page A</span>
</a>
</li>
<li id="nav-menu-item-1704" class="main-menu-item">
<a href="#/?page_id=735" class="menu-link main-menu-link">
<span>Page B</span>
</a>
</li>
</ul>
</nav>
The functionality is sort of ok - I click on the menu that has children, toggle the class active and the unsorted children list shows. But the problem is that when I click on the anchor in the child, the list closes and the links don't do anything because of e.preventDefault();.
Can this be sorted out? I tried unbinding the click, but that didn't work.

just use javascript to emulate anchor click with window.location.href = $(this).attr("href")

Bootstrap horizontal navigation bar with vertical dropdown CSS

I have just started playing with twitter bootstrap and am attempting to build a site from scrap with it. I am having trouble creating a horizontal nav bar with vertical dropdowns with each <li> as a new row. (My current dropdown has all <li> in the same row).
Can someone please teach me how?
Navbar HTML:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="NIS.html">NIS<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="TNU.html">TNU</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="NIC.html">NIC</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="trial.html">trial</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
CSS:
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}

This is the answer I gave that solved a very similar problem for myself and someone else. Maybe it'll work for you.
I had a similar problem. I narrowed it down to the "display: table-cell;" entry. Through looking around and 'playing' I managed to find a fix for my situation
First:
.navbar .nav li .dropdown-menu li { display: block; width: auto; }
to set the list items under the dropdown to display as a block (with max width of the dropdown menu holder).
Secondly:
.dropdown-menu { left:auto; }
to place the dropdown under the correct menu-item.