Close hamburger menu with JS

Close hamburger menu with JS - javascript

how can I close my hamburger menu when clicking on link, I need it for one page navigation. Menu works fine but just need a way to close it.
I have very little knowledge about JS.
I have this in HTML and CSS, don't have any JS:
HTML in index.html file
<nav>
<div id="menuToggle">
<input type="checkbox"/>
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li>idi na 1</li>
<li>idi na 2</li>
<li>idi na 3</li>
</ul>
</div>
</nav>
CSS in style.css file
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
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%;
}
#menuToggle input:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000000;
}
#menuToggle input:checked ~ span:nth-last-child(3){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2){
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu{
background-size:cover;
background-repeat:no-repeat;
position: absolute;
width: 100vw;
height:100vh;
margin: -77px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: rgba(255,255,255,1);
list-style-type: none;
-webkit-font-smoothing: antialiased;
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: 60px;
text-align: center;
}
#menuToggle input:checked ~ ul{
transform: scale(1.0, 1.0);
opacity: 1;
}
#media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
Thank you very much for any help you can provide!

Use trigger .
$('#menu > li > a').on('click', function() {
$("#menuToggle").find('input').trigger("click");
});
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
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%;
}
#menuToggle input:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000000;
}
#menuToggle input:checked ~ span:nth-last-child(3){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2){
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu{
background-size:cover;
background-repeat:no-repeat;
position: absolute;
width: 100vw;
height:100vh;
margin: -77px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: rgba(255,255,255,1);
list-style-type: none;
-webkit-font-smoothing: antialiased;
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: 60px;
text-align: center;
}
#menuToggle input:checked ~ ul{
transform: scale(1.0, 1.0);
opacity: 1;
}
#media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li>idi na 1</li>
<li>idi na 2</li>
<li>idi na 3</li>
</ul>
</div>
Note: Don't forget to put your js code inside document.ready.
$(function() {
$('#menu > li > a').on('click', function() {
$("#menuToggle").find('input').trigger("click");
});
});

Related

How Do I Close A Hamburger Menu When Clicking On The Forward Or Back Arrow On A Browser?

Below is the code I've got set up for my responsive menu. On the hamburger menu, I have some Javascript set so that the menu will close after clicking on one of the links inside of it.
Javascript:
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
What I'd like to do is also have the hamburger menu close when navigating between pages using the forward or backward arrow on a web browser. I've played around with a few bits of Javascript but haven't been able to achieve the result I'm looking for. If anyone knows how I could close the hamburger menu when navigating between pages I'd appreciate you sharing your knowledge with me. Thank you.
Menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

How Can I Close My Hamburger Menu After Clicking On A Link?

I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}

Navigation submenu is coming down with scroll

I have made this navigation, everything works well. However, while I was testing I realised that if you hover on the first nav and scroll down, you will see that the submenu is coming with the mouse as well. How can I avoid it?
Note: Run it in full (desktop) screen size.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind("click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom {
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo {
float: left;
}
.logo img {
width: 290px;
}
.custom-navi {
margin: 0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.topnav .icon {
display: none;
padding-top: 5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color: white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi {
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display: none;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight: normal;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display: block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity: 0;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img {
padding-left: 11px;
}
.custom-navi {
margin: 0;
padding: 0px;
}
.topnav.responsive {
position: relative;
width: 100%;
margin-top: 15px;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
padding-left: 10px;
padding-top: 0px;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active {
color: #002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-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;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
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;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main {
background-color: #eee;
width: 100vw;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>

Use position: absolute instead of position: fixed:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind("click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom {
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo {
float: left;
}
.logo img {
width: 290px;
}
.custom-navi {
margin: 0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.topnav .icon {
display: none;
padding-top: 5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color: white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi {
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display: none;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight: normal;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display: block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img {
padding-left: 11px;
}
.custom-navi {
margin: 0;
padding: 0px;
}
.topnav.responsive {
position: relative;
width: 100%;
margin-top: 15px;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
padding-left: 10px;
padding-top: 0px;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active {
color: #002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-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;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
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;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main {
background-color: #eee;
width: 100vw;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>

don't use position fixed if you dont want the element to stick to screen. use relative.
#media screen and (min-width: 1150px)
.dropdown-content {
visibility: hidden;
opacity: 0;
position: relative;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind( "click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom{
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo{
float:left;
}
.logo img{
width:290px;
}
.custom-navi{
margin:0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight:bold;
}
.topnav .icon {
display: none;
padding-top:5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color:white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi{
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display:none;
position: relative;
min-width: 160px;
padding-top:18px;
padding-bottom: 18px;
z-index:999;
background-color:white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight:normal;
}
.topnav a:hover, .dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display:block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity:0;
position: relative;
min-width: 160px;
padding-top:18px;
padding-bottom: 18px;
z-index:999;
background-color:white;
}
.dropdown:hover .dropdown-content {
visibility:visible;
opacity:1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img{
padding-left:11px;
}
.custom-navi{
margin:0;
padding: 0px;
}
.topnav.responsive {position: relative; width:100%; margin-top:15px;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;padding-left:10px;padding-top:0px;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active{
color:#002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-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;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
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;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main{background-color:#eee;
width:100vw;
height:100vh;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a >Contact persons</a>
<a >Contact persons</a>
<a >Contact persons</a>
<a >Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div></a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>

Drop down menu is not positioning correcting and on hover text moves

I am having a little bit of trouble figuring this out. I have 2 issues
When I hover over a a button (example About). It goes bold. However, the "boldness" of the about shifts all the other buttons about 2 pixels on hover. A little stuck on how I can fix this.
I've added a drop down menu, but on hover, the drop downs aren't being positioned directly under its Category. I am trying to position it so the sub menu's are under the category, centered.
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav ul {
margin: 0;
text-transform: uppercase;
}
.nav ul li {
text-align: center;
display: inline-block;
list-style: none;
padding: 15px 15px;
cursor: pointer;
line-height: 30px;
}
.nav ul li:hover a {
font-weight: bold;
}
.nav ul li a {
color: #eee;
text-decoration: none;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

First of all you need to use > in a selector to select the direct child ..
Remove left: 0 from ul > li > ul because it sticks the nested ul absolute position to the left
Set padding : 15px to the <a> instead of <li>
By using > style the main <ul> and the nested one separately
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav > ul {
margin: 0;
text-transform: uppercase;
}
.nav > ul > li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
line-height: 30px;
}
.nav > ul > li > a {
color: #eee;
text-decoration: none;
padding : 15px;
display : block;
}
.nav > ul > li:hover > a {
font-weight: bold;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
ul > li > ul {
position : static;
}
}
ul > li > ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
padding-top: 1rem;
/*left: 0;*/
display: none;
background : yellow;
}
ul > li:hover > ul{
visibility: visible;
opacity: 1;
display: block;
}
ul > li > ul > li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Links jumping on hover

I've been looking at my CSS too long and need another set of eyes. I'm having trouble with a couple things. First: I can't figure out why my links are jumping on hover. It's supposed to be a mobile responsive hamburger to horizontal nav bar but I'm fairly new to this and have played around with too many parts of the code to know what I'm doing or not doing. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-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: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
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-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>

go to line 237 and change this:
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
to this
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;
}

Develop Reference

JavaScript is the programming language of the Web.

Close hamburger menu with JS - javascript

Related

How Do I Close A Hamburger Menu When Clicking On The Forward Or Back Arrow On A Browser?

How Can I Close My Hamburger Menu After Clicking On A Link?

Navigation submenu is coming down with scroll

Drop down menu is not positioning correcting and on hover text moves

Links jumping on hover

Categories

Resources