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.

Fullscreen Overlay Navigation with 2nd Level

I am trying to create a fullscreen navigation overlay with 2 levels of navigation.
Currently I have managed to build the fullscreen overlay along with the level 1 navigation.
https://codepen.io/anon/pen/rJJGKE
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #000;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #000;
}
.btn-close:after {
color: #000;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #000;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(135, 119, 116, 0.95);
}
.overlay .menu {
margin: 100px auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
margin-bottom: 40px;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 10px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #000;
text-transform: capitalize;
font-weight: 300;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.overlay .menu ul ul li a:hover {
color: #34b484;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #c3bab9;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 600!important;
font-size: 18px!important;
letter-spacing: 1px;
}
p.email a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 300!important;
font-size: 16px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #000000;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Logo
<img src="" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
Menu
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What i am looking to do now is: When a user clicks on services, instead of going to services page, i would like a second level menu to appear (service 1, service 2 etc) in the same place as the existing menu.
Would this require a jQuery solution? Any help would be appreciate.

Yeah, I think a simple jQuery function in combination with some CSS would be the best solution:
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
// I added this line
$(this).next('.sub').toggleClass('visible');
});
.overlay .menu ul li .sub {
max-height: 0;
transition: max-height 0.4s ease;
overflow: hidden;
}
.overlay .menu ul li .sub.visible {
max-height: 500px;
transition: max-height 0.4s ease;
}
Have a look over here (Just click on the 'Service' button)

Responsive menu not working on desktop

I'm trying to create a responsive menu, I've got it to work on mobile but when it opens into desktop browser the menu buttons are wonky and not set to full width.
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);
/*Javascript*/
$(function() {
var $page = jQuery.url.attr("file");
$('ul.navigation li a').each(function() {
var $href = $(this).attr('href');
if (($href == $page) || ($href == '')) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
/*Javascript End*/
body {
font-family: Helvetica, Arial, sans-serif;
float: left;
margin: 0;
padding: 0;
}
#logo {
z-index: 100;
position: relative;
float: left;
padding-left: 3px;
padding-top: 7px;
}
#menutext {
color: #e30317;
font-size: 22px;
}
#menu {
overflow-y: scroll;
position: absolute;
border-color: #eeeeee;
z-index: -100;
background: #ffffff;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 4.1em;
font-weight: 200;
width: 100%;
margin: inherit;
color: #c6c6c6;
padding-bottom: 0;
height: 300px;
}
#lines {
position: relative;
object-position: center;
border-color: #e30317;
}
ul.navigation {
background: #fff;
}
ul.navigation li a {
text-decoration: none;
}
ul.navigation li a.on {
background: #eeeeee;
padding: 2px 6px;
min-width: 100%;
}
.mobile-menu {
display: block;
background: #c6c6c6;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 100px;
font-weight: 200;
width: 100%;
text-align: center;
position: fixed;
margin: 0 auto;
color: #c6c6c6
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
list-style-type: none;
padding-left: 0;
text-align: center;
width: 100%;
position: relative;
background: #c6c6c6;
position: relative;
height: 50px;
}
/*Create a horizontal list with spacing*/
.mobile-menu li {
display: inline-block;
/*float: left;
margin-right: 1px;*/
}
/*Style for menu links*/
.mobile-menu li a {
display: block;
min-width: 130px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #eee;
text-transform: uppercase;
background: #253746;
text-decoration: none;
margin-left: -15px;
padding: 20px 0;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 1.0em;
font-weight: bold;
border-color: #e30317;
border-left: 1px solid;
border-top: 1px solid;
border-right: 3px solid;
border-bottom: 0px solid;
height: 70px;
}
/*Hover state for top level links*/
.mobile-menu li:hover a {
color: #333;
background-color: #eee;
}
/*Style for dropdown links*/
.mobile-menu li:hover ul a {
background: #c6c6c6;
color: #FFF;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
color: #eee;
}
/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
display: none;
color: #eee
}
/*Make dropdown links vertical*/
.mobile-menu li ul li {
display: none;
float: none;
}
/*Prevent text wrapping*/
.mobile-menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 10px;
}
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.mobile-menu .show-menu span {
padding-left: 35px;
}
/*Hide checkbox*/
.mobile-menu input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked~#menu {
display: block;
color: #333333;
}
/*Responsive Styles*/
#media screen and (max-width: 916px) {
.mobile-menu .lines {
border-bottom: 15px double #f8f8f8;
border-top: 5px solid #f8f8f8;
content: "";
height: 5px;
width: 20px;
padding-right: 15px;
float: right;
}
/*Make dropdown links appear inline*/
.mobile-menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.mobile-menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a {
width: 100%;
}
/*Display 'show menu' link*/
.mobile-menu .show-menu {
display: inherit;
color: #fff;
}
}
/* Test CSS END*/
}
}
#media screen and (min-width: 481px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#pager {
width: 481px;
}
#media screen and (min-width: 916px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#page {
min-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Face Masks</title>
<nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">
<label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
<input type="checkbox" id="show-menu">
<ul class="menu" id="menu">
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png">Head Safety</li>
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png">Hearing Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png">Face Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png">Disp. Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png">Eye Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png">Contact</li>
</ul>
</nav>
</head>
<body>
<div style="padding-top: 113px">
<img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
</div>
</body>
</html>

jQuery is missing in your document (I get a Uncaught ReferenceError: $ is not defined when I run your snippet).
To add jQuery, add this line to your <head> section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thanks Guys its sorted the alignment out but just very bunched up in desktop browser not set to full width.

How to get submenu to appear below main menu

Menu
NOTE: you may need to expand the Result Box
above is what i am trying to fix, the idea is that when you hover the Men and Women <li> elements a submenu appears below, this is why the hidden div is inside the <li> because then when you leave the link to go into the div it's not going to disappear. however my problem is that the other menu items are being pushed down.
Now before i did have it working, this is what i had
Old Version
however i was requested to push the first 3 links to the left and the last link to the right. all i did was add floats which seem to be the cause. i have tried changing the display property, I've tried changing the position property however the only other result i get that the sub menu sets on the end and not under the menu.
I've about ran out of idea except for getting the x and y coordinates and using css to force the div to sit there however i don't think it'll work unless it's outside the <li>, What else can i do to get my submenu to work correctly while keeping the menu alignment as it is

Is this the result you wanted to achieve? I've added my CSS at the end, for the floating of the "Cart" entry, I added an ID (cart) to cart <li> element.
JSFiddle
Here is a snippet.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/* ie 6/7 */
}
/* Actual CSS */
#copyright {
text-align: center;
margin: 0px auto;
font-size: 10px;
}
#container {
width: 930px;
margin: 0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float: left;
text-align: center;
}
#byline {
background: #7D787D;
text-align: center;
color: white;
margin-top: 12px;
margin-bottom: 12px;
padding: 5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear: both;
margin: 0;
padding: 0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left: 27px !important;
}
.shipping a {
padding-left: 47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left: 75px !important;
padding-top: .2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left: 23px !important;
padding-top: .2em !important;
}
#herofooter ul li a:hover,
#footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a,
#footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu {
width: 800px;
text-align: center;
margin: 0px auto;
}
#footernav li {
font-size: 12px;
}
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color: #000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color: #000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color: #CC3333;
color: #FFFFFF;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale,
#logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align: center;
margin-right: 25px;
display: block;
float: right;
margin-top: 15px;
}
#stylesearch {
border: 1px solid black;
padding: 0;
margin: 0;
width: 190px;
padding-top: 2px;
line-height: 22px;
}
#productsearch {
padding-left: 5px;
padding-right: 5px;
}
#searchbox {
border: 0;
border-right: 1px solid #686868;
margin-right: 2px;
margin-bottom: 1px;
margin-top: 1px;
padding: 5px;
width: 140px;
float: left;
}
#searchbox:focus,
#searchbox:hover {
background: #FDFDFD;
color: #000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em;
/*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
float: right;
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top: 1px solid #CC0001;
}
/* nav me */
.navme ul li {
display: inline;
}
.navme ul li a {
text-decoration: none;
}
#memberprogram p {
/* margin: 0; */
}
#footermenu {
text-align: left;
}
#footernav li {
display: inline-block;
width: 145px;
}
.cartimage {
vertical-align: middle;
margin-top: -7px;
border-style: none
}
.navbuttons {
min-height: 30px;
}
.mega-menu {
float: left;
z-index: 1000;
position: inherit;
text-align: left;
background: #aaaaaa;
}
/*--------Added CSS---------*/
.mega-menu {
position: absolute;
left: 0;
top: 100%;
width: 500px;
}
#navbar ul li {
position: relative;
float: left;
}
#navbar ul ul li {
float: none;
}
#navbar ul ul li a {
padding: 0 15px 0 15px;
}
#navbar ul li:hover > ul {
display: block;
}
#navbar ul li#cart {
float: right;
}
li.header {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function showMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "block"
})
}
function hideMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "none"
})
}
</script>
<div id="navbar" class="navbuttons">
<ul id="headernav">
<li>New Arrivals
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Men
<div id="mens-cat" name="mens-cat" class="mega-menu" style="display: none; margin-top: -1px;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Activewear
</li>
<li> Business Shirts
</li>
<li> Coats and Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Women
<div id="womens-cat" name="womens-cat" class="mega-menu" style="display: none;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Basic Tops
</li>
<!-- <li>Cathouse Suits</li>-->
<li> Fashion Tops
</li>
<li> Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li id="cart">My Cart
</li>
</ul>
</div>

see the jsfiddle code : http://jsfiddle.net/sbaxe5m3/2/
add this css:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* ie 6/7 */
}
/* Actual CSS */
#copyright { text-align:center; margin:0px auto; font-size:10px; }
#container {
width: 930px;
margin:0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float:left;
text-align:center;
}
#byline {
background: #7D787D;
text-align:center;
color: white;
margin-top:12px;
margin-bottom:12px;
padding:5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear:both;
margin:0;
padding:0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left:27px !important;
}
.shipping a {
padding-left:47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left:75px !important;
padding-top:.2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left:23px !important;
padding-top:.2em !important;
}
#herofooter ul li a:hover, #footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a, #footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu { width: 800px; text-align:center; margin: 0px auto;}
#footernav li { font-size:12px; }
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color:#000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color:#000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color:#CC3333 ;
color:#FFFFFF ;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale, #logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align:center;
margin-right:25px;
display:block;
float:right;
margin-top:15px;
}
#stylesearch {
border:1px solid black;
padding:0;
margin:0;
width:190px;
padding-top:2px;
line-height:22px;
}
#productsearch {
padding-left:5px;
padding-right:5px;
}
#searchbox {
border:0;
border-right:1px solid #686868;
margin-right:2px;
margin-bottom:1px;
margin-top:1px;
padding:5px;
width:140px;
float: left;
}
#searchbox:focus, #searchbox:hover {
background: #FDFDFD;
color:#000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li { display: inline; }
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em; /*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top:1px solid #CC0001;
}
/* nav me */
.navme ul li { display: inline; }
.navme ul li a {
text-decoration: none;
}
#memberprogram p
{
/* margin: 0; */
}
#footermenu { text-align:left; }
#footernav li { display: inline-block; width: 145px; }
.cartimage
{
vertical-align: middle;
margin-top: -7px;
border-style:none
}
.navbuttons
{
min-height:30px;
}
#navbar ul li {
display: inline;
line-height: 30px;
position: relative;
}
.mega-menu
{
float: left;
z-index:1000;
position: inherit;
text-align:left;
background:#aaaaaa; left: 50%;
margin-left: -327px;
position: absolute;
top: 27px;
width: 654px;
}