Responsive navbar menu (hamburger menu) doesn't open by clicking

Responsive navbar menu (hamburger menu) doesn't open by clicking - javascript

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.
$('.navTrigger').click(function() {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 0.9rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
}
.nav div.logo a:hover {
color: #00E676;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 2px;
padding-right: 0.9rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 80%;
font-weight: bold;
}
.nav div.main_list ul li a:hover {
color: #00b3ee;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 1;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.navTrigger {
display: block;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
height: 0;
overflow: hidden;
}
.nav div.show_list {
height: auto;
display: none;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 100vh;
right: 0;
left: 0;
bottom: 0;
background-color: #111;
/*same background color of navbar*/
background-position: center top;
}
.nav div.main_list ul li {
width: 100%;
text-align: right;
}
.nav div.main_list ul li a {
text-align: center;
width: 100%;
font-size: 3rem;
padding: 20px;
}
.nav div.media_button {
display: block;
}
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
#-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
#-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align: center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left: 15%;
padding-right: 15%;
font-size: 20px;
}
#media all and (max-width:700px) {
.myP {
padding: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="img" class="ha">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="chk2.png" class="hello">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS AT HEGTAVIC</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>

I have tried your code and modified in fallowing way. It is working fine.
$(document).ready(function(){
$('.navTrigger').on('click',function (){
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
});

Related

How make the input go from draging to pressing left and right

Hello I don't really understand javascript well because I only use python typically. and I'm doing this javascript project and I want to make it where the input is not dragging and instead it is left and right.
So like when you move the lock all your have to do is press the arrow keys. Any help would greatly be very very nice.
JS
// make dial draggable
Draggable.create(".dial", {
type:"rotation",
throwProps:true
});
// values 40 or above will be set to 0
const combo = [20, 5, 30],
findCombo = function(comboArr){
let dial = $(".dial"),
dialTrans = dial.css("transform"),
ticks = 40,
tickAngle = 360 / ticks,
numOffset = 0.5, // how far red arrow can be from number
// break down matrix value of dial transform and get angle
matrixVal = dialTrans.split('(')[1].split(')')[0].split(','),
cos1 = matrixVal[0],
sin = matrixVal[1],
negSin = matrixVal[2],
cos2 = matrixVal[3],
angle = Math.round(Math.atan2(sin, cos1) * (180 / Math.PI)) * -1;
// convert negative angles to positive
if (angle < 0) {
angle += 360;
}
// check numbers found, stop loop if at first number not found
for (let i = 0; i < comboArr.length; ++i) {
if (!$(".num" + (i + 1)).hasClass("found")) {
if (angle > (comboArr[i] - numOffset) * tickAngle &&
angle < (comboArr[i] + numOffset) * tickAngle) {
// make numbers green when found
$(".num" + (i + 1)).addClass("found");
// on unlock
if (i == comboArr.length - 1) {
$(".shackle").addClass("unlocked");
$(".top").addClass("pivot1");
$(".inner").addClass("pivot2");
$(".left").addClass("moveRight");
$(".dentL, .dentR").addClass("moveLeft");
// then lock again
setTimeout(function() {
$(".shackle").removeClass("unlocked");
$(".top").removeClass("pivot1");
$(".inner").removeClass("pivot2");
$(".left").removeClass("moveRight");
$(".dentL, .dentR").removeClass("moveLeft");
$("body").attr("style","background: black;");
$(".sitelocker").attr("style","display:none;");
$(".mainsitebody").removeAttr("style");
for (let j = 0; j < combo.length; ++j) {
$(".num" + (j + 1)).removeClass("found");
}
}, 2400);
}
}
break;
}
}
};
// dial interaction (mouse)
$(".dial").on("click",function(){
findCombo(combo);
});
// dial interaction (touch)
$(".dial").on("touchend",function(){
findCombo(combo);
});
CSS
.sitelocker {
counter-reset: inc -5;
font-family: Open Sans, sans-serif;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
margin-bottom: 18px;
position: relative;
height: 270px;
width: 180px;
}
.lock, .dial {
border-radius: 50%;
}
.arrow, .dial {
margin: auto;
}
.shackle, .dial, .tick {
position: absolute;
}
.lock {
background: #aaa;
position: absolute;
bottom: 0;
height: 180px;
width: 180px;
}
.shackle {
bottom: 108px;
right: 22.5px;
width: 135px;
height: 168.75px;
will-change: transform;
z-index: -1;
}
.shackle div {
background: #999999;
position: absolute;
will-change: transform;
}
.shackle .top {
border-radius: 135px 135px 0 0;
height: 67.5px;
width: 135px;
transform-origin: 100% 0;
}
.shackle .inner {
background: #fff;
border-radius: 50%;
top: 33.75px;
left: 33.75px;
height: 67.5px;
width: 67.5px;
}
.shackle .left, .shackle .right {
top: 66.5px;
width: 33.75px;
}
.shackle .left {
border-radius: 0 0 6.75px 6.75px;
height: 94.5px;
overflow: hidden;
position: relative;
}
.shackle .left .dentL, .shackle .left .dentR {
position: absolute;
bottom: 16.875px;
z-index: 2;
}
.shackle .left .dentL {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-left: 15px solid #fff;
left: -30px;
}
.shackle .left .dentR {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-right: 15px solid #fff;
right: 0;
}
.shackle .right {
right: 0;
height: 135px;
}
.arrow {
border: 7.5px solid transparent;
border-color: #a00 transparent transparent transparent;
margin-top: 11.25px;
margin-bottom: 3px;
transform: translateY(7.5px);
height: 0;
width: 0;
}
.dial {
background: #333 radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 30px, #1a1a1a 30px, #1a1a1a 32.25px, rgba(0, 0, 0, 0) 32.25px, rgba(0, 0, 0, 0));
font-family: Helvetica, sans-serif;
left: 0;
right: 0;
bottom: 7.2px;
position: absolute;
height: 144px;
width: 144px;
transform: rotate(0deg);
will-change: transform;
z-index: 1;
}
.tick {
background: #fff;
color: #fff;
font-size: 15px;
top: 72px;
left: 70.5px;
width: 3px;
height: 9px;
transform-origin: 50% -63px;
}
.tick::before {
display: block;
margin: -18px -18px 0 -18px;
text-align: center;
transform: rotate(180deg);
}
.tick:nth-of-type(1) {
transform: translateY(63px) rotate(180deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(180deg);
}
.tick:nth-of-type(1)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(2) {
transform: translateY(63px) rotate(189deg);
}
.tick:nth-of-type(3) {
transform: translateY(63px) rotate(198deg);
}
.tick:nth-of-type(4) {
transform: translateY(63px) rotate(207deg);
}
.tick:nth-of-type(5) {
transform: translateY(63px) rotate(216deg);
}
.tick:nth-of-type(6) {
transform: translateY(63px) rotate(225deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(225deg);
}
.tick:nth-of-type(6)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(7) {
transform: translateY(63px) rotate(234deg);
}
.tick:nth-of-type(8) {
transform: translateY(63px) rotate(243deg);
}
.tick:nth-of-type(9) {
transform: translateY(63px) rotate(252deg);
}
.tick:nth-of-type(10) {
transform: translateY(63px) rotate(261deg);
}
.tick:nth-of-type(11) {
transform: translateY(63px) rotate(270deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(270deg);
}
.tick:nth-of-type(11)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(12) {
transform: translateY(63px) rotate(279deg);
}
.tick:nth-of-type(13) {
transform: translateY(63px) rotate(288deg);
}
.tick:nth-of-type(14) {
transform: translateY(63px) rotate(297deg);
}
.tick:nth-of-type(15) {
transform: translateY(63px) rotate(306deg);
}
.tick:nth-of-type(16) {
transform: translateY(63px) rotate(315deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(315deg);
}
.tick:nth-of-type(16)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(17) {
transform: translateY(63px) rotate(324deg);
}
.tick:nth-of-type(18) {
transform: translateY(63px) rotate(333deg);
}
.tick:nth-of-type(19) {
transform: translateY(63px) rotate(342deg);
}
.tick:nth-of-type(20) {
transform: translateY(63px) rotate(351deg);
}
.tick:nth-of-type(21) {
transform: translateY(63px) rotate(360deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(360deg);
}
.tick:nth-of-type(21)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(22) {
transform: translateY(63px) rotate(369deg);
}
.tick:nth-of-type(23) {
transform: translateY(63px) rotate(378deg);
}
.tick:nth-of-type(24) {
transform: translateY(63px) rotate(387deg);
}
.tick:nth-of-type(25) {
transform: translateY(63px) rotate(396deg);
}
.tick:nth-of-type(26) {
transform: translateY(63px) rotate(405deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(405deg);
}
.tick:nth-of-type(26)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(27) {
transform: translateY(63px) rotate(414deg);
}
.tick:nth-of-type(28) {
transform: translateY(63px) rotate(423deg);
}
.tick:nth-of-type(29) {
transform: translateY(63px) rotate(432deg);
}
.tick:nth-of-type(30) {
transform: translateY(63px) rotate(441deg);
}
.tick:nth-of-type(31) {
transform: translateY(63px) rotate(450deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(450deg);
}
.tick:nth-of-type(31)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(32) {
transform: translateY(63px) rotate(459deg);
}
.tick:nth-of-type(33) {
transform: translateY(63px) rotate(468deg);
}
.tick:nth-of-type(34) {
transform: translateY(63px) rotate(477deg);
}
.tick:nth-of-type(35) {
transform: translateY(63px) rotate(486deg);
}
.tick:nth-of-type(36) {
transform: translateY(63px) rotate(495deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(495deg);
}
.tick:nth-of-type(36)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(37) {
transform: translateY(63px) rotate(504deg);
}
.tick:nth-of-type(38) {
transform: translateY(63px) rotate(513deg);
}
.tick:nth-of-type(39) {
transform: translateY(63px) rotate(522deg);
}
.tick:nth-of-type(40) {
transform: translateY(63px) rotate(531deg);
}
.combo {
font-size: 22.5px;
text-align: center;
display: none;
}
.combo span {
background: #ccc;
display: inline-block;
line-height: 30px;
padding: 7.5px;
width: 30px;
height: 30px;
vertical-align: middle;
}
.combo span.found {
background: #ccc;
color: #fff;
}
/* Animation classes */
.unlocked {
animation: moveUp 0.2s linear forwards, moveUp 0.2s 2s linear reverse forwards;
}
.moveLeft {
animation: moveLeft 0.5s 0.4s linear forwards, moveLeft 0.5s 1.2s linear reverse forwards;
}
.moveRight {
animation: moveRight 0.5s 0.4s linear forwards, moveRight 0.5s 1.2s linear reverse forwards;
}
.pivot1 {
animation: pivot1 0.5s 0.4s linear forwards, pivot1 0.5s 1.2s linear reverse forwards;
}
.pivot2 {
animation: pivot2-1 0.25s 0.4s cubic-bezier(0.6, 0.3, 0.45, 1) forwards, pivot2-2 0.25s 0.65s cubic-bezier(0.2, 0, 0.63, 0.5) forwards, pivot2-2 0.25s 1.3s cubic-bezier(0.2, 0, 0.63, 0.5) reverse forwards, pivot2-1 0.25s 1.45s cubic-bezier(0.6, 0.3, 0.45, 1) reverse forwards;
}
#keyFrames moveUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-63px);
}
}
#keyframes moveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(30px);
}
}
#keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(202.5px);
}
}
#keyframes pivot1 {
from {
transform: scale(1, 1);
right: 0;
}
50% {
transform: scale(0.25, 1) rotateY(0);
right: 0;
}
50.01% {
transform: scale(0.25, 1) rotateY(180deg);
right: 33.75px;
}
to {
transform: scale(1, 1) rotateY(180deg);
right: 33.75px;
}
}
#keyframes pivot2-1 {
from {
transform: scale(1, 1);
}
to {
transform: scale(0, 1);
}
}
#keyframes pivot2-2 {
from {
transform: scale(0, 1);
}
to {
transform: scale(1, 1);
}
}
:root{
--text-color: #003cff;
--streak-color: #ff0000;
--font-family: "Gidugu";
}
h1, p, span {
color: transparent;
font-weight: 400;
font-size: 6rem;
}
h1 {
display: block;
height: 50vh;
background: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
p, span {
display: inline-block;
}
p {
padding-left: 1rem;
font-size: 6rem;
text-shadow: 0 0 221px transparent;
-webkit-animation: showText 1s 1.5s 1 forwards ease-out;
animation: showText 1s 1.5s 1 forwards ease-out;
position: relative;
font-family: var(--fontstyle), cursive;
}
p:after {
content: "";
width: 30px;
background: var(--text-color);
height: 30px;
position: absolute;
top: 0px;
left: 200px;
border-radius: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
box-shadow: 0 0 0px 103px var(--text-color);
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: scaleBounce .3s 2s 1 linear forwards;
animation: scaleBounce .3s 2s 1 linear forwards;
}
span {
text-shadow: -48px -203px 150px var(--text-color), 132px -203px 150px var(--text-color);
-webkit-animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
font-family: var(--fontstyle), cursive;
}
span:first-child {
-webkit-animation-delay: -.3s;
animation-delay: -.3s;
}
span:nth-child(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
span:nth-child(3) {
-webkit-animation-delay: .7s;
animation-delay: .7s;
}
h1:after {
content: "";
display: block;
width: 200px;
height: 4px;
position: absolute;
left: 50%;
margin-left: -300px;
margin-top: 60px;
border-radius: 100%;
background: var(--streak-color);
box-shadow: 32px 5px 0 var(--streak-color);
-webkit-animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
#-webkit-keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#-webkit-keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#-webkit-keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#-webkit-keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#-webkit-keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
#keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
HTML
<html >
<head>
<meta charset="UTF-8">
<title>Combination Lock</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Satisfy" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="css/sitelocker.css">
<link rel="stylesheet" href="css/mainsite.css">
</head>
<body>
<div class="sitelocker">
<div class="container">
<div class="lock">
<div class="shackle">
<div class="top">
<div class="inner"></div>
</div>
<div class="left">
<div class="dentL"></div>
<div class="dentR"></div>
</div>
<div class="right"></div>
</div>
<div class="arrow"></div>
</div>
<div class="dial">
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
</div>
<div class="combo"><span class="num1"></span> <span class="num2"></span> <span class="num3"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js'></script>
<script src="js/sitelocker.js"></script>
</div>
<div class="mainsitebody" style="display:none;">
<h1>
<span>MSFT</span><span>.</span>
<p>online</p>
</h1>
</div>
</body>
</html>

Responsive Navbar: Menu Not Disappearing (CSS and JS)

Building a responsive menu bar. The problem is when you click the hamburger lines and the page options appear, when you click the links, the menu doesn't disappear. I've tried adding and removing a class disappear{display:none}, and I've also tried building a for loop but neither works. I know I'm way overthinking this, what options should I explore to fix it?
(Note that you may have to shrink your screen down to less than 600px in width to see the hamburger menu if it isn't currently available to click)
lkl;
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.getElementsByClassName('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

the problem was using getElementsByClassName like this document.getElementsByClassName('.links').forEach you can not use forEach and .linke css selector with getElementsByClassName use querySelectorAll
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.querySelectorAll('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

when using getElementsByClassName you shouldn't use . while specifying the class.
getElementsByClassName returns HTMLCollection that doesn't have forEach loop, so you need to convert it into array as:
const linksArray = [...links];
or
const linksArray = Array.from( links );
You can also use querySelectorAll(".links")
const toggleBtn = document.getElementById("nav_check");
const menuBtn = document.getElementById("nav_icon");
toggleBtn.addEventListener("click", function() {
if (!menuBtn.classList.contains("open")) {
menuBtn.classList.add("open");
} else {
menuBtn.classList.remove("open");
}
});
const links = document.getElementsByClassName("links");
const linksArray = [...links];
linksArray.forEach((item) => {
item.addEventListener("click", (event) => {
document.getElementById("nav_check").checked = false;
menuBtn.classList.remove("open");
});
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background: #d3d3d3;
}
.navBar {
width: 100%;
height: 3.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0A2463;
position: fixed;
color: #fafafa;
}
.nav_btn {
display: none;
}
.nav_links>a {
padding: .5rem;
margin: auto;
text-decoration: none;
color: #fafafa;
}
.nav_links>a:hover {
color: #ED1250;
}
#nav_check,
#nav_icon {
display: none;
}
.resume {
color: #ED1250;
border-radius: 4px;
border: solid #ED1250 1px;
padding: .5rem;
margin-right: .5rem;
}
.resume:hover {
background: rgb(237, 18, 80, .2);
color: #fafafa;
}
.social {
display: none;
}
#media (max-width:600px) {
.navBar {
height: 3.3rem;
}
.nav_btn {
display: inline-block;
float: right;
}
#nav_icon {
display: block;
width: 60px;
height: 45px;
position: fixed;
right: 1rem;
top: -3rem;
margin: 50px auto;
z-index: 6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border: solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),
#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: 400;
line-height: 4.5rem;
font-size: 3rem;
background: #0A2463;
}
.menu_textWrapper {
display: flex;
flex-direction: column !important;
width: 18rem;
background: #0A2463;
}
.links:hover::after {
content: "»";
font-size: 2.5rem;
}
#nav_check:not(:checked)~menu {
display: none;
}
.navBar>#nav_check:checked~.menu {
display: flex;
flex-direction: column;
}
}
/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
[].forEach.call( document.getElementsByClassName('links'), item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>
please use:
[].forEach.call( document.querySelectorAll('a'), function(el) {
// whatever with the current node
});

Automatically close menu after link is clicked

At the moment, my navigation bar houses links to sections on the one page and doesn't have any links to other pages. When a link is clicked it automatically goes to the corresponding div on that page however, part of the target div is covered by the navigation bar which remains open until the close button is clicked.
My question is, is there a way to force the header to close once a link has been clicked?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});

add this jquery function in your js file :
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
here is snippet for understanding:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>

How to achieve smoothe slide down effect in Navbar Menu

Objective - I wanted to achieve a slide down (for navbar) effect after some scrolling. I actually achieved what I wanted, but I am getting a problem.
Problem - When scrolling up to the top, the navbar is getting sticky with no effect and it is kind of takes the charm. Can anyone help me to fix this?
You can see my code here at Codepen.
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#header').addClass('sticky-header');
$('#header .mo-row').removeClass('sticky-border');
} else {
$('#header').removeClass('sticky-header');
$('#header .mo-row').addClass('sticky-border');
}
});
var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebarBox.classList.remove('active');
} else {
this.classList.add('active');
sidebarBox.classList.add('active');
}
});
// accordion js
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active2');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active2')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active2');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
html {
box-sizing: border-box;
}
body {
margin: 0;
height: 1000px;
-webkit-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
.mo-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 999;
position: relative;
}
.mo-row {
width: 95%;
margin: 0 auto;
}
.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after {
content: " ";
display: table;
}
.mo-grid:after,
.mo-row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 10px;
}
#media screen and (min-width: 320px) {
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
#media screen and (min-width: 992px) {
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}
}
.hello-bar {
height: 40px;
line-height: 39px;
background: #52ae56;
text-align: center;
color: #fff;
}
.hello-bar a {
color: #fff;
text-transform: uppercase;
font-size: 12px;
}
.hello-bar a span {
font-weight: bold;
}
.sticky-header {
background-color: #fff !important;
box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
height: 65px;
line-height: 65px;
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slidedown {
0% {
opacity: 0;
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slidedown {
0% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.sticky-border {
border-bottom: 1px solid #e8e8e8;
}
#header-sec {
position: relative;
z-index: 9999999;
height: 65px;
line-height: 65px;
/* Fold Out */
/* accordion css */
}
#header-sec #header {
background-color: transparent;
width: 100%;
height: 66px;
line-height: 64px;
position: absolute;
}
#header-sec #header .navbar-logo {
height: 65px;
line-height: 65px;
cursor: pointer;
}
#header-sec #header .navbar-logo img {
height: 75px;
margin-top: -4px;
margin-left: -17px;
}
#header-sec .nav ul {
background-color: transparent;
}
#header-sec .nav ul > li {
display: inline-block;
position: relative;
}
#header-sec .nav a {
display: block;
padding: 10px 18px 10px 15px;
font-size: 0.9em;
line-height: 1.2em;
color: #0d1739;
font-weight: 400;
}
#header-sec .nav a:hover {
text-decoration: none;
}
#header-sec .nav li ul {
background-color: #fff;
}
#header-sec .nav li ul li {
width: 200px;
display: block;
text-align: left;
}
#header-sec .nav li ul a {
border: none;
color: #333;
}
#header-sec .nav li ul a:hover {
background: #333;
color: #fff;
}
#header-sec .nav li ul {
position: absolute;
left: 0;
top: 52px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
#header-sec .nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);
}
#header-sec .accordion-section-content li {
background: #fff;
padding: 10px 30px;
border-bottom: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
}
#header-sec .accordion-section-content li:hover {
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content li:last-child {
border-bottom: none;
}
#header-sec a {
color: #343838;
}
#header-sec #box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
right: -250px;
width: 250px;
opacity: 0;
padding: 20px 0px;
height: 100%;
background-color: #f6f6f6;
color: #343838;
-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #box.active {
right: 0px;
opacity: 1;
}
#header-sec #items {
position: relative;
top: 8.7%;
line-height: normal;
}
#header-sec #items .item {
position: relative;
cursor: pointer;
font-size: 1em;
/* originally 2ems */
padding: 10px 20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
#header-sec #items .item:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec #btn {
position: absolute;
z-index: 5;
top: 22px;
right: 9px;
cursor: pointer;
-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #btn div {
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: #1d1f20;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#header-sec #btn.active {
right: 9px;
}
#header-sec #btn.active div {
background-color: #343838;
}
#header-sec #btn.active #top {
-webkit-transform: translateY(10px) rotate(-135deg);
-ms-transform: translateY(10px) rotate(-135deg);
transform: translateY(10px) rotate(-135deg);
}
#header-sec #btn.active #middle {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#header-sec #btn.active #bottom {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
#header-sec .accordion {
overflow: hidden;
line-height: normal;
}
#header-sec .accordion-section-title {
cursor: pointer;
width: 100%;
transition: all linear 0.15s;
-webkit-transition: all linear 0.15s;
-moz-transition: all linear 0.15s;
-ms-transition: all linear 0.15s;
-o-transition: all linear 0.15s;
position: relative;
display: block;
padding: 10px 20px;
}
#header-sec .accordion-section-title:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content {
display: none;
background: #f0f0f0;
}
#header-sec .active2, #header-sec .open {
display: block;
}
#header-sec #box, #header-sec #btn {
display: none;
}
#media screen and (max-width: 992px) {
#header-sec .navbar-menu {
display: none;
}
#header-sec #box, #header-sec #btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
<img src="img/notification.png" alt="" style="width: 17px;"></a>
</div>
</div>
</div>
</div>
<section id="header-sec">
<header id="header">
<div class="mo-container">
<div class="mo-row sticky-border">
<nav class="col-sm-6 col-md-4 col-lg-2">
<div class="navbar-logo">
<img src="img/logo-dark.png" alt="">
</div>
</nav>
<nav class="col-sm-6 col-md-8 col-lg-10 text-right">
<div class="navbar-menu nav">
<ul>
<li>
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</li>
<li>
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Customer Stories</li>
<li>Help & Support</li>
<li>Developers Docs</li>
</ul>
</li>
<li>
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</li>
<li>Pricing</li>
<li>Login</li>
<li>Sign Up</li>
<li>
<a href="" style="padding-right: 0;">
<button class="button primary">Free Demo</button>
</a>
</li>
</ul>
</div>
<div id="box">
<div id="items">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-1" class="accordion-section-content">
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-2" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-3" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="item">Pricing</div>
<div class="item">Login</div>
<div class="item">Sign Up</div>
</div>
</div>
<div id="btn">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</nav>
</div>
</div>
</header>
</section>

So I changed your sticky header JS to add a class on scroll up and a class of show once 200px had been scrolled from the top.
JS
// Sticky Header
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll > 200) {
jQuery("#header").addClass("show");
} else {
jQuery("#header").removeClass("show");
}
});
var lastScrollTop = 0;
jQuery(window).scroll(function(event){
var st = jQuery(this).scrollTop();
if (st > lastScrollTop){
jQuery("#header").removeClass("up");
} else {
jQuery("#header").addClass("up");
}
lastScrollTop = st;
});
Then Added the CSS
#header-sec #header,
#header-sec #header.up{
position: absolute;
top: 0;
-webkit-transition: top 500ms ease-out ;
-moz-transition: top 500ms ease-out ;
-o-transition: top 500ms ease-out ;
transition: top 500ms ease-out ;
}
#header-sec #header.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#header-sec #header.up.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slideup;
animation-name: slideup;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
}
#keyframes slideup {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
}
Hope you can use this

Menu not working on Android Chrome

I have created a fullscreen overlay menu for my personal portfolio. It's working absolutely fine in Chrome / FF / IE on desktop and on my regular Android browser on my Galaxy S4. However, I cannot get it to work on Chrome for Android. It's as if the jQuery just isn't being toggled in that browser.
Code below. JSFiddle here. Live example here.
HTML:
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
JS:
$(document).ready(function(){
$("#toggle").on('click touchstart', function(event) {
event.preventdefault();
$("#overlay").toggleClass("open")
});
});
CSS:
.overlay {
position: fixed;
background: #FF5252;;
top: 0;
left: 0;
width: 0%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, width .35s ease-in-out;
transition: opacity .35s, visibility .35s, width .35s ease-in-out;
overflow: hidden;
z-index: 100;
}
.overlay.open {
opacity: .9;
visibility: visible;
width: 100%;
}
.overlay nav {
position: relative;
height: 60%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 32px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay nav ul li {
display: block;
height: 20%;
height: -webkit-calc(100% / 5);
height: calc(100% / 5);
min-height: 32px;
position: relative;
opacity: 0;
}
.overlay.open nav ul li {
-webkit-animation: menuFade .5s ease forwards;
animation: menuFade .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open nav ul li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open nav ul li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open nav ul li:nth-of-type(4) {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.overlay.open nav ul li:nth-of-type(5) {
-webkit-animation-delay: .55s;
animation-delay: .55s;
}
#-webkit-keyframes menuFade {
0% {
opacity: 0;
left: -25%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes menuFade {
0% {
opacity: 0;
left: -25%;
}
100% {
opacity: 1;
left: 0;
}
}
.overlay nav ul li a {
display: block;
position: relative;
color: #FFF;
overflow: hidden;
}
.overlay nav ul li a:hover {
text-decoration: none;
}
.overlay nav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%);
height: 3px;
width: 100%;
background: #FFF;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.overlay nav ul li a:hover:after {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}

Problem solved. My phone cached the old version of the JS file, which didn't jive with the new menu. Clearing the cache solved all problems.

Develop Reference

JavaScript is the programming language of the Web.

Responsive navbar menu (hamburger menu) doesn't open by clicking - javascript

I have tried your code and modified in fallowing way. It is working fine. $(document).ready(function(){ $('.navTrigger').on('click',function (){ $(this).toggleClass('active'); console.log("Clicked menu"); $("#mainListDiv").toggleClass("show_list"); $("#mainListDiv").fadeIn(); }); });

Related

How make the input go from draging to pressing left and right

Responsive Navbar: Menu Not Disappearing (CSS and JS)

Automatically close menu after link is clicked

How to achieve smoothe slide down effect in Navbar Menu

Menu not working on Android Chrome

Categories

Resources