We Keep Coding

How to make my navbar sticky in mobile view?

I want to make my navbar sticky, it is working on a regular screen view but it is not working on mobile view.
I have created a regular navbar for widescreen and a hamburger style navbar on mobile view.
I am still learning and new to frontend so I am aware that the below code is pretty bad. Any suggestions will be appreciated.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
navbar_mobile.classList.add("sticky_mobile");
} else {
navbar.classList.remove("sticky");
navbar_mobile.classList.remove("sticky_mobile");
}
}
/* NAVIGATION FOR WIDE SCREEN*/
#navbar {
z-index: 10;
}
ul li:before {
content: ' ';
position: absolute;
left: 0;
}
.navigation-menu-sep {
width: 100%;
margin: 0 auto;
background: #fff;
}
.navigation-menu-sep .navigation-menu-sep-ul {
list-style: none;
text-align: center;
}
.navigation-menu-sep .navigation-menu-sep-ul li {
display: inline-block;
}
.navigation-menu-sep .navigation-menu-sep-ul li a {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a,
.navigation-menu-sep ul li a:after,
.navigation-menu-sep ul li a:before {
transition: all .5s;
}
.navigation-menu .navigation-menu-sep-ul li a:hover {
color: #555;
}
/* stroke */
.navigation-menu-sep .navigation-menu-sep-ul li a{
position: relative;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #0e2e39;
height: 2px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:hover:after {
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky_mobile {
position: fixed !important;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky + .content {
padding-top: 60px;
}
#media screen and (max-width: 500px) {
#navbar {
display: none;
}
}
/* NAVIGATION MENU FOR MOBILE - HAMBURGER STYLE */
#menuToggle
{
display: block;
position: relative;
top: 10px;
background: #fff;
z-index: 10;
-webkit-user-select: none;
user-select: none;
margin-bottom: 50px;
}
#media screen and (min-width: 501px) {
#menuToggle {
display: none;
}
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
<div id="navbar">
<nav class="navigation-menu-sep">
<ul class="navigation-menu-sep-ul">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</nav>
</div>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</div>
</nav>
Basically, I have more elements above this navbar.
I am not sure what I did wrong, but the sticky-navbar on mobile view sticks at the top instead of only sticking when the user scrolls.

There is a CSS feature for this.
position: sticky;

Try adding a little buffer before switching to the sticky mode. In the modified example below there is 100px buffer before triggering the sticky mode. Also removed the sticky_mobile class as they were both doing the same thing.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop + 100;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop + 100;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/* NAVIGATION FOR WIDE SCREEN*/
#navbar {
z-index: 10;
}
ul li:before {
content: ' ';
position: absolute;
left: 0;
}
.navigation-menu-sep {
width: 100%;
margin: 0 auto;
background: #fff;
}
.navigation-menu-sep .navigation-menu-sep-ul {
list-style: none;
text-align: center;
}
.navigation-menu-sep .navigation-menu-sep-ul li {
display: inline-block;
}
.navigation-menu-sep .navigation-menu-sep-ul li a {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a,
.navigation-menu-sep ul li a:after,
.navigation-menu-sep ul li a:before {
transition: all .5s;
}
.navigation-menu .navigation-menu-sep-ul li a:hover {
color: #555;
}
/* stroke */
.navigation-menu-sep .navigation-menu-sep-ul li a{
position: relative;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #0e2e39;
height: 2px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:hover:after {
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky + .content {
padding-top: 60px;
}
#media screen and (max-width: 500px) {
#navbar {
display: none;
}
}
/* NAVIGATION MENU FOR MOBILE - HAMBURGER STYLE */
#menuToggle
{
display: block;
position: relative;
top: 10px;
background: #fff;
z-index: 10;
-webkit-user-select: none;
user-select: none;
margin-bottom: 50px;
}
#media screen and (min-width: 501px) {
#menuToggle {
display: none;
}
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
<div id="navbar">
<nav class="navigation-menu-sep">
<ul class="navigation-menu-sep-ul">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</nav>
</div>
a
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
b
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
c
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
d
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
e
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
f
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</div>
</nav>

There was a bug in my javascript, that was the cause of it not being able to add the new class "sticky".
This is not the best but it works.
<script>
window.onscroll = function() {
myFunction();
myFunction_mobile();
}
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
function myFunction_mobile() {
if (window.pageYOffset >= sticky_mobile) {
navbar_mobile.classList.add("sticky_mobile");
} else {
navbar_mobile.classList.remove("sticky_mobile");
}
}
</script>

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

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

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

How to highlight navigation menu items(that has ::after pseudo element) according to the active page.

I have ::after pseudo element for navigation hover animation. Now i need the hover thing to stay right there according to which page its active. Since I have the ::after pseudo element, I just can't make it work with the addClass on jQuery.
<ul class="main-nav">
<li>About<div></div></li>
<li>Services<div></div></li>
<li>Portfolio<div></div></li>
<li>Career<div></div></li>
<li>Contact<div></div></li>
</ul>
Here is the CSS
.main-nav{
float: right;
font-family: 'Open Sans';
font-size: 87.5%;
font-weight:700;
color: #fff;
position: absolute;
right: 140px;
user-select: none;
transition: all .3s ease;
z-index: 10;
}
.main-nav li{
list-style: none;
display: inline-block;
padding-left: 45px;
margin-top: 3.86%;
line-height: 44px;
text-align: justify;
}
.main-nav li a{
text-decoration: none;
color: #fff;
padding-left: 5px;
padding-right: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.main-nav li a:after{
text-align: center;
text-decoration: none;
content:'';
display:block;
width:0; opacity: 0; height:3px;
margin-top: 12px;
background-color:#fff;
transform: translateX(-50%);
transition:all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.main-nav li a:hover:after{width:100%; opacity: 1; transform: translateX(0%);}

A new css class can be added. Such a class can be added dynamically to the div child of li of your interest at document load:
var currwinAddr = window.location.href.split('/').pop();
$('.main-nav a').filter(function(idx, ele) {
return ele.href.indexOf(currwinAddr) != -1;
}).find('div').addClass('myhighlight');
.main-nav {
background-color: blue;
float: right;
font-family: 'Open Sans';
font-size: 87.5%;
font-weight: 700;
color: #fff;
position: absolute;
right: 140px;
user-select: none;
transition: all .3s ease;
z-index: 10;
}
.main-nav li {
list-style: none;
display: inline-flex; /* changed */
padding-left: 45px;
margin-top: 3.86%;
line-height: 44px;
text-align: justify;
}
.main-nav li a {
text-decoration: none;
color: #fff;
padding-left: 5px;
padding-right: 5px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.main-nav li a:after {
text-align: center;
text-decoration: none;
content: '';
display: inline-flex; /* changed */
width: 0;
opacity: 0;
height: 3px;
margin-top: 12px;
background-color: #fff;
transform: translateX(-50%);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.main-nav li a:hover:after {
width: 100%;
opacity: 1;
transform: translateX(0%);
}
/* added */
.myhighlight {
display: block;
height: 3px;
margin-top: -10px;
background-color: #fff;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a href="aboutUs.html">About
<div></div>
</a></li>
<!-- changed href in the next element for test purposes -->
<li><a href="js">Services
<div class="myclass"></div>
</a></li>
<li><a href="portfolio.html">Portfolio
<div></div>
</a></li>
<li><a href="career.html">Career
<div></div>
</a></li>
<li><a href="contact.html">Contact
<div></div>
</a></li>
</ul>

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)

Hide menu outclick [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 6 years ago.
I am writing menu for responsive website, but I am stunned in one moment - hide menu when outclick...
I would really appreciate any help with my bugged jQuery :) - link to jsfiddle
function hamburgerClick()
{
$('#hamburgerMenu').click(function(e) // (hide || show) menu by clicking "hamburgerMenu" icon
{
e.preventDefault();
if( $('#hamburgerMenu').hasClass('is-active') )
{
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
else
{
$('#hamburgerMenu').addClass('is-active');
$('#menu').addClass('is-active');
}
});
}
function hideMenuOutclick() /* does not work */
{
if( $('#hamburgerMenu').hasClass('is-active') )
{
$(document).click(function(e)
{
if( ($(e.target).closest('#menu').length!==0) ||
($(e.target).closest('#hamburgerMenu').length!==0) )
{
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
});
}
}
function beginJS()
{
hamburgerClick();
hideMenuOutclick();
/* few more scripts */
}
window.onload = beginJS;
.bg-red
{
background-color: #e32624;
}
/********** pure header **********/
#header
{
width: 100%;
height: 56px;
display: block;
position: fixed;
}
/********** fixing Comission **********/
.fixingComission
{
display: block;
float: right;
position: relative;
width: auto;
height: 56px;
appearance: none;
box-shadow: none;
border-radius: none;
background-color: #e32624;
transition: background 0.3s;
}
.fixingComission a
{
font-size: 26px;
color: #ffffff;
padding: 10px 12px;
}
/********** hamburger button **********/
#hamburgerMenu
{
display: block;
float: left;
position: relative;
overflow: hidden;
width: 56px;
height: 56px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
cursor: pointer;
background-color: #e32624;
transition: background 0.3s;
}
#hamburgerMenu:focus
{
outline: none;
}
/********** hamburger button span **********/
#hamburgerMenu span
{
display: block;
position: absolute;
top: 25px;
left: 12px;
right: 12px;
height: 5px;
background: white;
transition: transform 0.3s;
}
#hamburgerMenu span::before,
#hamburgerMenu span::after
{
position: absolute;
display: block;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
content: "";
}
#hamburgerMenu span::before
{
top: -14px;
transform-origin: top right;
transition: transform 0.3s, width 0.3s, top 0.3s;
}
#hamburgerMenu span::after
{
bottom: -14px;
transform-origin: bottom right;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
#hamburgerMenu span:focus
{
outline: none;
}
/********** hamburger button active - class added onclick by JS **********/
#hamburgerMenu.is-active
{
background-color: #bc1a18;
}
/********** hamburger button span active **********/
#hamburgerMenu.is-active span
{
transform: rotate(180deg);
}
#hamburgerMenu.is-active span::before,
#hamburgerMenu.is-active span::after
{
width: 50%;
}
#hamburgerMenu.is-active span::before
{
top: 0;
transform: translateX(22px) translateY(2px) rotate(45deg);
}
#hamburgerMenu.is-active span::after
{
bottom: 0;
transform: translateX(22px) translateY(-2px) rotate(-45deg);
}
/********** navigation **********/
#menu
{
display: block;
position: fixed;
z-index: 1000;
background-color: #003e78;
overflow: hidden;
-webknit-overflow-scroll: touch; /* for mobile safari */
top: 56px;
width: 65%;
height: 100%;
left: -65%;
transition-property: opacity, left;
transition-duration: 0.3s, 0.5s;
}
#menu.is-active
{
left: 0;
}
#menu ul
{
overflow: auto;
width: 100%;
height: 100%;
padding-right: 0; /* exact value is given by JS to hide scrollbar */
}
#menu ul::-webkit-scrollbar
{
display: none;
}
#menu ul li
{
display: inline-block;
width: 100%;
height: 52px;
}
#menu ul li.current,
#menu ul li:hover,
#menu ul li:active
{
background-color: #0066c5;
}
#menu ul li a
{
display: block;
height: 30px;
width: 100%;
color: #ffffff;
font-size: 1em;
padding: 12px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header id="header" class="bg-red">
<button class="fixingComission">
Zleć naprawę
</button>
<button id="hamburgerMenu"><span>toggle menu</span></button>
<nav id="menu">
<ul>
<li class="current">Start</li>
<li>O nas</li>
<li>Serwis</li>
<li>W sumie to nie wiem</li>
<li>Kontakt</li>
<li>Zleć naprawę</li>
</ul>
</nav>
</header>
//hamburgerClick is working, but hideMenuOutclick is not.
I know, that on jsfiddle project isn't working, but it works on localhost and srv with implemented jQuery v1.10.2
I would be really grateful to tip about scrolling in CSS3:
Why despite "overflow: auto" '$("#menu").onMouseOver' is still scrolling whole page? Is it possible to force scrolling some element (even if it is full-viewed in computer screen), not whole page?
EDIT: Hiding menu is done with click event (which will be matched for invalids and it won't be click - really thanks to point this out!) Now only thing is this scrolling :)

For the jsfiddle bug the problem is in this line:
if( $('#hamburgerMenu').hasClass('is-active') ) {
If the menu is not active on document load the event handler never be attached.
The updated jsfiddle: the errors here are: jquery missing, load type: wrap in the head.
I assume you want to close the menu when clicking outside the menu.
For the second part of your question I figured out the problem is related to the height of the #menu: change it from 100% to 50%.
The snippet:
function hamburgerClick()
{
$('#hamburgerMenu').click(function(e) // (hide || show) menu by clicking "hamburgerMenu" icon
{
e.preventDefault();
if( $('#hamburgerMenu').hasClass('is-active') )
{
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
else
{
$('#hamburgerMenu').addClass('is-active');
$('#menu').addClass('is-active');
}
});
}
function hideMenuOutclick() /* does not work */
{
$(document).click(function(e)
{
if( ($(e.target).closest('#menu').length==0) &&
($(e.target).closest('#hamburgerMenu').length==0) )
{
if( $('#hamburgerMenu').hasClass('is-active') ) {
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
}
});
}
function beginJS()
{
hamburgerClick();
hideMenuOutclick();
/* few more scripts */
}
window.onload = beginJS;
.bg-red
{
background-color: #e32624;
}
/********** pure header **********/
#header
{
width: 100%;
height: 56px;
display: block;
position: fixed;
}
/********** fixing Comission **********/
.fixingComission
{
display: block;
float: right;
position: relative;
width: auto;
height: 56px;
appearance: none;
box-shadow: none;
border-radius: none;
background-color: #e32624;
transition: background 0.3s;
}
.fixingComission a
{
font-size: 26px;
color: #ffffff;
padding: 10px 12px;
}
/********** hamburger button **********/
#hamburgerMenu
{
display: block;
float: left;
position: relative;
overflow: hidden;
width: 56px;
height: 56px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
cursor: pointer;
background-color: #e32624;
transition: background 0.3s;
}
#hamburgerMenu:focus
{
outline: none;
}
/********** hamburger button span **********/
#hamburgerMenu span
{
display: block;
position: absolute;
top: 25px;
left: 12px;
right: 12px;
height: 5px;
background: white;
transition: transform 0.3s;
}
#hamburgerMenu span::before,
#hamburgerMenu span::after
{
position: absolute;
display: block;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
content: "";
}
#hamburgerMenu span::before
{
top: -14px;
transform-origin: top right;
transition: transform 0.3s, width 0.3s, top 0.3s;
}
#hamburgerMenu span::after
{
bottom: -14px;
transform-origin: bottom right;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
#hamburgerMenu span:focus
{
outline: none;
}
/********** hamburger button active - class added onclick by JS **********/
#hamburgerMenu.is-active
{
background-color: #bc1a18;
}
/********** hamburger button span active **********/
#hamburgerMenu.is-active span
{
transform: rotate(180deg);
}
#hamburgerMenu.is-active span::before,
#hamburgerMenu.is-active span::after
{
width: 50%;
}
#hamburgerMenu.is-active span::before
{
top: 0;
transform: translateX(22px) translateY(2px) rotate(45deg);
}
#hamburgerMenu.is-active span::after
{
bottom: 0;
transform: translateX(22px) translateY(-2px) rotate(-45deg);
}
/********** navigation **********/
#menu
{
display: block;
position: fixed;
z-index: 1000;
background-color: #003e78;
overflow: hidden;
-webknit-overflow-scroll: touch; /* for mobile safari */
top: 56px;
width: 65%;
height: 50%;
left: -65%;
transition-property: opacity, left;
transition-duration: 0.3s, 0.5s;
}
#menu.is-active
{
left: 0;
}
#menu ul
{
overflow: auto;
width: 100%;
height: 100%;
padding-right: 0; /* exact value is given by JS to hide scrollbar */
}
#menu ul::-webkit-scrollbar
{
display: none;
}
#menu ul li
{
display: inline-block;
width: 100%;
height: 52px;
}
#menu ul li.current,
#menu ul li:hover,
#menu ul li:active
{
background-color: #0066c5;
}
#menu ul li a
{
display: block;
height: 30px;
width: 100%;
color: #ffffff;
font-size: 1em;
padding: 12px 0;
}
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<header id="header" class="bg-red">
<button class="fixingComission">
Zleć naprawę
</button>
<button id="hamburgerMenu"><span>toggle menu</span></button>
<nav id="menu">
<ul>
<li class="current">Start</li>
<li>O nas</li>
<li>Serwis</li>
<li>W sumie to nie wiem</li>
<li>Kontakt</li>
<li>Zleć naprawę</li>
</ul>
</nav>
</header>