After changing some styles, the hamburger icon for mobile phones does not display anymore, how can I bring it back? also what would be the best way to add a little bit more white space above and under the menu but keep the position the same?
HTML:
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS:
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
JS:
$(document).ready(function() {
"use strict";
var myNav = {
init: function() {
this.cacheDOM();
this.browserWidth();
this.bindEvents();
},
cacheDOM: function() {
this.navBars = $(".navBars");
this.xBxHack = $("#xBxHack");
this.navMenu = $("#menu");
},
browserWidth: function() {
$(window).resize(this.bindEvents.bind(this));
},
bindEvents: function() {
var width = window.innerWidth;
if (width < 600) {
this.navBars.click(this.animate.bind(this));
this.navMenu.hide();
this.xBxHack[0].checked = false;
} else {
this.resetNav();
}
},
animate: function(e) {
var checkbox = this.xBxHack[0];
!checkbox.checked ?
this.navMenu.slideDown() :
this.navMenu.slideUp();
},
resetNav: function() {
this.navMenu.show();
}
};
myNav.init();
});
In this jsfiddle you can see that the icon does not appear when the screen is small: https://jsfiddle.net/quehf3x9/
Firstly make sure that you're loading the Font Awesome library. That wasn't being loaded in the JS Fiddle example. So I included a link to a CDN.
Secondly, add a width, height and background color to the CSS for the navbars:
.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}
See my updated JS Fiddle for a working example.
You have two problems with your fiddle above. The first is that you did not include the font awesome library. The code does not know what to do with the fa fa-bars classes. To include an external library in jsfiddle:
Find a CDN where the file is hosted
Copy the path to the file
Paste it in the left sidebar in the External Resources section.
Select the + icon to add the resource to the fiddle.
Once the file is loaded, you can see from the developer tools (open the tools by selecting F12) that the class is applied but the icon color is white. You'll want to add some CSS to color the icon such as:
label i {
color: #333;
}
I've made these two changes and updated your fiddle here.
There are two things-
First one you are missing to include Font Awesome library
Secondly the color of icon is white. So you won't be able to see it even if you include the library, changing the color will do the trick <i class="fa fa-bars" style="color:black;"></i>
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars" style="color:black;"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
Related
I'm building a navigation menu on my website and I've ran into a problem regarding a dropdown sub-menu on mobile. On desktop, using w3Schools as a reference, I created a sub-menu that displays a ul on hover.
On mobile, however, I'm having two problems:
The first is that I want to be able to click to open the menu. I've tried to look into solutions for having a clickable menu toggle on mobile and a hover toggle on desktop, but I don't know much about javascript and wouldn't know where to start. I've also tried making the menu open by clicking on both desktop and mobile, but I would prefer if it was hoverable on desktop.
I also want the menu to display differently on mobile and tablet. I want it to be a block that spans the width of my popout sidebar rather than a popup as it is on desktop. I've tried to style the menu differently to make it fit my vision (almost like an accordion dropdown), but it opens over the top of my other list items. Instead, I want it to open and push down the list items.
Any help would be appreciated!
Here's my code (this version includes a click-to-open menu on desktop and mobile):
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function subOpen() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.sub-menu-link')) {
var dropdowns = document.getElementsByClassName("sub-menu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//Code for hamburger menu toggle
const menuBtn = document.querySelector(".menu-btn");
let menuOpen = !1;
menuBtn.addEventListener("click", () => {
menuOpen ? (menuBtn.classList.remove("open"), menuOpen = !1, document.documentElement.style.overflow = "scroll", document.body.scroll = "yes") : (menuBtn.classList.add("open"), menuOpen = !0, document.documentElement.style.overflow = "hidden", document.body.scroll = "no")
})
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.header-cont,
.nav-link {
align-items: center;
}
.header-nav,
.nav-item {
height: 60px;
}
.header {
background: #fff;
box-shadow: 0 0 10px -3px rgb(0 0 0 / 50%);
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.nav-link,
.sub-menu-link {
padding: 0 1rem 0 1rem;
font-weight: 600;
color: #0f0f0f !important;
cursor: pointer;
}
.sub-menu-link:after {
position: absolute;
right: 15px;
content: "⌃";
font-size: 15px;
border: none;
transform: rotate(180deg);
visibility: hidden!important;
}
.header-menu {
margin-right: 20px;
}
.header-menu li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.only-mobile {
display: none !important;
}
.nav-item,
.nav-link {
display: inline-block;
}
.nav-item {
line-height: 60px;
}
.drop-chevron {
margin-left: 10px;
height: 13px;
fill: #0f0f0f;
}
.nav-item:hover svg {
fill: #00007a !important;
}
.nav-item:hover {
background-color: #00007a0d;
transition: background-color 0.3s;
}
.nav-link:hover,
.sub-menu-link:hover {
color: #00007a !important;
transition: 0.3s;
text-decoration: none !important;
}
.sub-menu {
position: relative !important;
}
.sub-menu-link {
display: inline-block !important;
text-decoration: none !important;
}
#check,
.checkbtn {
display: none;
}
.sub-menu-content {
display: none;
margin-top: -0.1rem;
background-color: #fff !important;
box-shadow: 0 6px 14px -1px rgb(0 5 20 / 15%);
border-radius: 3px;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 1000;
}
.sub-menu-content ul {
list-style-type: none;
line-height: 30px;
}
.sub-item {
width: 200px;
margin-left: -0.5rem;
}
.sub-menu-content li:last-child {
border-bottom: 1px solid transparent !important;
padding-bottom: 0.1rem !important;
margin-bottom: -0.2rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 0.8rem;
margin-left: -2rem;
text-decoration: none;
display: block;
text-align: left;
border-left: solid 4px transparent;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: 4px solid #ff9f1c;
background-color: #00007a0d;
color: #00007a !important;
}
/*.sub-menu:hover .sub-menu-content {
display: block;
}*/
.checkbtn {
font-size: 20px;
color: #00007a;
float: right;
line-height: 60px;
margin-right: 1rem;
cursor: pointer;
}
#media (max-width: 1025px) {
selector .header-logo {
margin-top: 0.1rem;
padding-top: 0;
}
.header-cont {
justify-content: space-between;
}
.only-mobile,
.sub-menu-link {
display: block !important;
}
.checkbtn,
.nav-link,
.sub-menu {
display: block;
}
.drop-chevron {
display: none;
}
.sub-menu-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
position: relative!important;
box-shadow: none;
border-radius: 0px!important;
}
.sub-menu-link:after {
visibility: visible!important;
}
.sub-item {
border-top: none;
margin-left: -1rem;
margin-top: 0rem;
margin-bottom: 0px;
box-sizing: border-box;
line-height: 3rem;
border-bottom: solid 1px #B5B5B5;
}
.sub-menu-content li:last-child {
padding-bottom: 0rem!important;
margin-bottom: 0rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 8px;
margin-left: 0rem;
text-decoration: none;
display: block;
border-left: none;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: none;
background-color: #00007a0d;
color: #00007a!important;
}
.header-menu {
position: absolute;
margin-top: 60px;
width: 80%;
height: 100vh;
background: #e8e8e8;
left: -100%;
text-align: left;
transition: 0.5s;
margin-right: 0;
padding: 0;
box-shadow: rgb(18 18 18 / 8%) 4px 4px 12px 0;
overflow: hidden!important;
}
.header-menu li:first-child {
margin-top: 0;
}
.header-menu :last-child {
padding-bottom: 0 !important;
}
.nav-item {
border-top: none;
margin-left: 0;
box-sizing: border-box;
border-bottom: 1px solid #b5b5b5;
width: 100%;
text-align: left;
line-height: 60px;
height: 60px;
display: block;
}
.nav-link:hover,
.sub-menu-link:hover {
background: #00007a0d;
transition-duration: 0.25s;
}
#check:checked~ul {
left: 0;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 60px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.menu-btn__burger,
.menu-btn__burger::after,
.menu-btn__burger::before {
width: 22px;
height: 2.5px;
background: #00007a;
border-radius: 3px;
transition: 0.3s ease-in-out;
}
.menu-btn__burger::after,
.menu-btn__burger::before {
content: "";
position: absolute;
}
.menu-btn__burger::before {
transform: translateY(-6.5px);
}
.menu-btn__burger::after {
transform: translateY(6.5px);
}
.menu-btn.open .menu-btn__burger {
background: 0 0;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.submenu {
list-style-type: none!important;
}
.subitem {
padding: 15px;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu:after {}
.has-submenu>a::after {
line-height: 16px;
font-weight: 600;
font-size: 15px;
border: none;
color: #0f0f0f;
padding-right: 0.3rem;
padding-top: 0.2rem;
display: inline-block;
content: "⌃";
transform: rotate(180deg);
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #111;
}
.submenu-active {
border-radius: 0;
}
<div class="header">
<div class="header-cont">
<div class="header-logo">
<a aria-hidden="true" href="/">
LOGO
</a>
</div>
<nav class="header-nav">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</label>
<ul class="header-menu">
<li class="nav-item">
<div class="sub-menu">
<a onclick="subOpen()" class="sub-menu-link">link 1<svg class="drop-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></a>
<div id="myDropdown" class="sub-menu-content">
<ul>
<li class="sub-item">sub link 1</li>
<li class="sub-item">sub link 2</li>
<li class="sub-item">sub link 3</li>
<li class="sub-item">sub link 4</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">link 2</li>
<li class="nav-item">link 3</li>
<li class="nav-item">link 4</li>
</ul>
</nav>
</div>
</div>
Add this to your CSS:
#media(min-width: 1025px){
.sub-menu:hover .sub-menu-content {
display: block;
}
}
This will make sure when the screen width is larger than 1025px (such as on a desktop and not mobile) your hover function will work to show the sub menu.
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.
Javascript up and Down Arrow menu
Here I posted my code please, I wanna create some javascript arrow for the menu which is functions need up and down, so I tried to figure out it's only having in jquery I search everywhere there are so many confusing codes are out there. But i need a simple and pure javascript code only. please someone willing to help me.
var menuup = document.getElementsByClassName("btn-down");
var menudwn = document.getElementsByClassName('btn-open');
nav {
position: relative;
padding: 45px 0px 0px 180px;
width: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav>ul>li {
float: left;
background: blue;
}
nav ul::after {
content: '';
display: block;
clear: both;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: inline-block;
color: #fff;
padding: 0.9rem 1rem;
text-decoration: none;
width: 120px;
}
nav ul li a:hover {
background-color: #339999;
}
.btn-open:after {
font-family: "FontAwesome";
content: "\f0de";
color: #fff;
font-size: 22px;
}
.btn-down:after {
font-family: "FontAwesome";
content: "\f0dd";
color: #fff;
font-size: 22px;
position: relative;
left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li>About us</li>
</ul>
</nav>
Is this what you want?
var anchors = Array.from(document.querySelectorAll('a'));
anchors.map(anchor => {
if(anchor.classList.contains('btn-open') || anchor.classList.contains('btn-down')) {
anchor.addEventListener('click', () => {
if(anchor.classList.contains('btn-open')) {
anchor.classList.remove('btn-open');
anchor.classList.add('btn-down');
} else {
anchor.classList.add('btn-open');
anchor.classList.remove('btn-down');
}
});
}
});
nav {
position: relative;
padding: 45px 0px 0px 180px;
width: 1rem;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav>ul>li {
float: left;
background: blue;
}
nav ul::after {
content: '';
display: block;
clear: both;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: inline-block;
color: #fff;
padding: 0.9rem 1rem;
text-decoration: none;
width: 120px;
}
nav ul li a:hover {
background-color: #339999;
}
.btn-open:after {
font-family: "FontAwesome";
content: "\f0de";
color: #fff;
font-size: 22px;
position: relative;
left: 10px;
top: 8px;
}
.btn-down:after {
font-family: "FontAwesome";
content: "\f0dd";
color: #fff;
font-size: 22px;
position: relative;
left: 10px;
top: -2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<ul>
<li>About us</li>
<li>Products</li>
</ul>
</nav>
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.
On a mobile version of the website I've a hamburger jquery menu that shows all the menu and submenu items. So far so good, but the problem is, if I have a lot of menu items, it will not fit the screensize thus some of the items or not visible. It would be a simple solution to just scroll in the menu itself to access them.
In short: how do I enable scrolling in the jquery menu when the menu is open?
I've included a screenshot to give you an idea how my menu looks like:
/* Site navigation */
.navbar {
position: relative;
width: 100%;
height: 70px;
background-color: rgba(0,120,191,0.8);
z-index: 9999;
}
.default-menu {
display: block;
float: right;
}
/* Expanding submenus */
ul.jquerymenu li.parent {
position: relative;
}
ul.jquerymenu li.parent span.parent {
display: none;
}
.ie ul.jquerymenu li.parent span.parent {
display: none;
}
ul.jquerymenu li.parent span.closed {
background: transparent;
}
ul.jquerymenu li.parent span.open {
background: transparent;
}
ul.jquerymenu li.parent ul {
margin: 0;
width: auto;
position: absolute;
top: 70px;
left: 0;
box-shadow: -3px 3px 10px 0px rgba(0,0,0,0.2);
}
ul.jquerymenu li.parent ul li {
width: 100%;
background-color: #006699;
text-align: left;
margin: 0 !important;
padding: 0 !important;
line-height: 1;
}
ul.jquerymenu li.parent ul li a {
padding: 20px !important;
margin: 0;
display: block;
line-height: 1.5;
text-decoration: none;
color: #fff;
}
.hamburger.mean-container {
position: absolute;
z-index: 1;
right: 0;
}
.mean-container .mean-bar {
width: 100%;
height: 70px;
min-height: 70px;
position: relative;
background: transparent;
padding: 0;
}
.mean-container .mean-nav ul li {
margin: 0;
font-size: 1.6rem;
}
.mean-container .mean-nav ul li:hover {
background: rgba(23,41,59,0.8);
}
.mean-container .mean-nav ul li a {
display: block;
float: left;
width: 88%;
padding: 20px;
margin: 0;
text-align: left;
color: #fff;
text-decoration: none;
text-transform: uppercase;
border-top: 0;
}
.mean-container .mean-nav ul li a:hover {
color: #fff;
}
.mean-container .mean-nav {
float: left;
width: 100%;
background: #006699;
margin-top: 70px;
}
.mean-container a.meanmenu-reveal {
width: 36px;
height: 30px;
padding: 20px 16px;
font-size: 2.8rem;
line-height: 32px;
}
.mean-container a.meanmenu-reveal span {
display: block;
background: #fff;
height: 5px;
margin-top: 5px;
}
.mean-container .mean-nav ul li a.mean-expand {
margin-top: -2px;
width: 100%;
height: 44px;
padding: 12px !important;
text-align: right;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-weight: 500;
background: transparent;
border: 0!important;
border-left: 0 !important;
border-bottom: 0 !important;
font-size: 3rem;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
background: transparent;
}
.mean-container .mean-nav ul li li a {
border-top: 0;
}
<nav class="navbar" style="position: fixed; top: 0px;">
<div class="container">
<div class="site-logo">
<a href="/" title="Title img" rel="home" id="logo">
<img src="storm-logo-56x182.png" alt="Alt text">
</a>
</div>
<div class="hamburger mean-container"><div class="mean-bar">X<nav class="mean-nav">
<div class="content">
<!--[if IE]><div class="ie"><![endif]--><ul style="display: block;"><li><span></span>De rijschool<ul style="display: none;"><li>De auto's</li><li>Voordelen</li><li>Bovag</li><li>De instructeurs</li><li>Slagingspercentage</li><li>Ervaringen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Opleidingen<ul style="display: none;"><li>Overzicht</li><li>Automaat</li><li>Handgeschakeld</li><li>Theorielessen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Specialisme<ul style="display: none;"><li>Aanpassingen</li><li>Automaat</li><li>Rijles ADHD</li><li>Rijles en ASS</li><li>Rijtest</li><li>Vastgelopen</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Trainingen<ul style="display: none;"><li>Hybride rijden</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Prijzen<ul style="display: none;"><li>Auto</li><li>Theorie</li></ul><a class="mean-expand" href="#" style="font-size: 20">+</a></li><li><span></span>Contact<ul style="display: block;"><li>Aanmelden</li><li>Informatie aanvraag</li><li>Bel mij terug</li><li class="mean-last">Contactgegevens</li></ul><a class="mean-expand mean-clicked" href="#" style="font-size: 20">-</a></li></ul><!--[if IE]></div><![endif]--> </div>
</nav></div></div>
</div>
<span class="js-responsive-dom-placeholder"></span>
</nav>