navigation button making locations apear - javascript

for some reason i cant make the navigation locations apear and disapear. i am not good at java script but i think that is the problem. i am trying to make the locations: WebDesign, Photography, SketchUp, Photoshop, About, Home apear when i press the 3 bars. the bars can change into a cross no problem.
function rotatebar(x) {
x.classList.toggle("rotate");
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>


You need to add .navlov as opacity:0 and display: inline-block in css. I added working snippet look at it.
function rotatebar(x) {
x.classList.toggle("rotate");
}
body {
background: #000;
}
.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline-block;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.navloc {
opacity: 0;
}
.rotate .navloc {
opacity: 1;
}
<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>

Related

Using Javascript To Toggle CSS - Disabling The Scroll Behind the Hamburger Menu

Below is both the HTML and CSS I'm using to create a website. I have no previous
experience with Javascript, so I'm unfamiliar with how to use it but would like to
be able to use Javascript to toggle some CSS so that the background doesn't scroll
when my hamburger menu is open. I'm stuck, but if anyone has any advice to give me
it'd be much appreciated.
Please ignore the Javascript above as this applies to the search bar I intend to use.
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<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: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br>
<h1 style="text-align: center; font-size: 40px;">東京都</h1>
<br>
<p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br>
<div class="image">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
</div>
</div>
<br><br>
<footer class="site-footer" style="font-size: 12px;"> | English</footer>
</div>
<style>
.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: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
`enter code here` 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: 1050px)and (min-width: 480px) {
/* 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;
}
</style>
</body>
</html>

Add an onchange event on the input you used to toggle the hamburger menu.
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
.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: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
`enter code here` 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: 1050px)and (min-width: 480px) {
/* 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;
}
<body style="background-color: white;">
<div class="page-wrap">
<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: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br>
<h1 style="text-align: center; font-size: 40px;">東京都</h1>
<br>
<p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br>
<div class="image">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
</div>
</div>
<br><br>
<footer class="site-footer" style="font-size: 12px;"> | English</footer>
</div>

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>

Hamburger navigation, how to hide/show links

So I have a navbar with an animated hamburger, and when I click the hamburger I want to display the navigation links, which are hidden by default.
How do I include the closeNav function on the hamburger when its an X? If I just insert it behind the openNav function then nothing shows up at all, so thats obviously not the right way.
function openNav() {
document.getElementById("navbar--middle").style.display = "block";
}
function closeNav() {
document.getElementById("navbar--middle").style.display = "none";
}
function myFunction(x) {
x.classList.toggle("change");
}
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="openNav(); myFunction(this)">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You have to put the if else condition of element.style.display like below
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--middle');
menu.style.display = "none";
hamburger.addEventListener('click', function() {
this.classList.toggle("change");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
})
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
}
.navbar--middle a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You want to include the state of the navbar in the class, usually this is done with open and close then once you click the hamburger button you can check to see the current state and execute the appropriate code.
https://api.jquery.com/addclass/
https://api.jquery.com/removeclass/

Why not add a class open, which you toggle in the 'myFunction' you have.
And set the style to display:block for that class?

This works for me:
function openNav() {
document.getElementById("navbar--middle").style.display = "block";
}
function closeNav() {
document.getElementById("navbar--middle").style.display = "none";
}
function myFunction(x) {
x.classList.toggle("change");
if(x.classList.contains("change")) {
openNav();
} else {
closeNav();
}
}
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="myFunction(this)">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You could toggle a class on both the menu and the hamburger, and adjust the styles in your CSS instead.
example...
var navbarBurger = document.getElementById('hamburger');
navbarBurger.addEventListener('click', function() {
var menu = document.getElementById("navbar--middle");
navbarBurger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.navbar--middle.is-active {
display: block;
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.is-active .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.is-active .icon2 {
opacity: 0;
}
/* Rotate last bar */
.is-active .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You would be better off simply toggling a class (on a parent element) on click with javascript. Transitions should be handled by CSS and by having a single parent class toggle you can use 1 class to handle all style changes.
Also take note of the z-index on the hamburger icon. This rule keeps the icon on the highest layer and clickable at all times.
function toggleNav() {
document.getElementById("body-id").classList.toggle('nav-toggle-class');
}
.navbar--middle {
padding-top: 80px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: red;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: all 0.4s ease;
}
body.nav-toggle-class .navbar--middle {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
.hamburger {
display: block;
cursor: pointer;
position: fixed;
left: 20px;
top: 20px;
z-index: 1;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.nav-toggle-class .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.nav-toggle-class .icon2 {
opacity: 0;
}
/* Rotate last bar */
.nav-toggle-class .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.navbar--middle a {
display: block;
padding: 8px 8px 8px 32px;
}
<body id="body-id" class="">
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="toggleNav();">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
</body>

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;
}

My Pop Up Window isn't displaying right

I'm redesigning a website for fun. I have a pop up window that opens up after you click a button. However, the window and button shows up in a weird layout. The button is displayed to the far left and the text is all over the screen. You can actually see the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Here is the HTML:
<!--- This is what the user see when they click the button -->
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<!-- this is what the user sees when the popup is displayed -->
<div class="popup">
<h2>Subscribe to the Newletter:</h2>
<button name="close">Close Pop-up</button>
</div>
Here is the CSS:
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
Here is the JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});

Try this code, I have added a simple form. You can just change the css of the popup or the form as you need.
function toggleOn(){
$('body, #menu, #navbar, #content').toggleClass('on');
}
$(document).ready(function (){
$('#menu').click(function(){ toggleOn(); });
$('#content').click(function(){
if ($('#navbar').hasClass('on')) toggleOn();
});
});
//this is for the pop up
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
//search bar
$(document).on('ready', function(){
var $wrap = $('[js-ui-search]');
var $close = $('[js-ui-close]');
var $input = $('[js-ui-text]');
$close.on('click', function(){
$wrap.toggleClass('open');
});
$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
console.log('triggered end animation');
if ($wrap.hasClass('open')) {
$input.focus();
} else {
return;
}
});
});
// pop up window
body {
color: white;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: inherit;
background: #000000;
perspective: 600px;
}
body h1, body h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
body h1 {
top: 24px;
font-size: 12px;
color: #cc0000;
margin-top: 200px;
}
body h2 {
font-size: 10px;
opacity: 0.7;
color: #cc0000;
z-index: 1;
}
body .msg {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 3px;
padding: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
body.on {
overflow: hidden;
}
#menu {
z-index: 100;
position: fixed;
width: 40px;
height: 40px;
top: 50px;
right: 50px;
background: none;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
}
#menu:hover {
background: #cc0000;
transition: all 0.2s ease-in-out;
}
#menu #line {
position: absolute;
width: 22px;
height: 2px;
left: 9px;
top: 19px;
background: white;
}
#menu #arrow {
position: absolute;
width: 6px;
height: 6px;
top: 16px;
right: 9px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
#menu.on {
transition: all 0.2s ease-in-out;
transform: rotate(90deg);
}
#menu.on:hover {
background: #404040;
transition: all 0.2s ease-in-out;
}
section {
position: relative;
width: 100%;
height: 450px;
padding: 1.5px 2.5px;
background: black;
transition: all 0.3s ease-in-out;
}
section.msg {
position: absolute;
opacity: 0.8;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
section.on {
box-shadow: 0 5px 20px #333333;
border-radius: 6px;
cursor: zoom-out;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: scale(0.8) translateY(100vh);
}
#navbar {
margin-top: 60px;
z-index: 90;
position: fixed;
width: 90vw;
height: 70vh;
top: 0;
left: 50%;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: translateX(-50%) scale(0);
}
#navbar .msg {
background: #404040;
}
#navbar.on {
top: 5vh;
opacity: 1;
transition: all 0.3s ease-in-out;
transform: translateX(-50%) scale(1);
}
/* BASE
================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 2.35;
color: #cc0000;
margin: 0;
}
p {
padding-top: 3em;
max-width: 700px;
margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
================================================================= */
nav {
position: fixed;
width: 100%;
top: 0;
background: black;
-webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
z-index: 1;
height: 80px;
}
nav:before {
content: "";
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.27);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
nav ul {
position: relative;
margin: 0;
z-index: 2;
text-transform: uppercase;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1.35em 0;
margin-right: 3em;
font-size: 0.9em;
}
nav ul li a {
text-decoration: none;
color: #cc0000;
font-size: 0.9em;
}
nav ul li a:hover{
color: white;
}
.edit{
margin-top: 150px;
}
.direct{
margin-top: 250px;
color: white;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
.logo{
float: left;
}
.logos{
margin-top: -9px;
width: 150px;
height: 100%;
}
section.content{
margin-top: 400px;
}
.stuff{
margin-top: 100px;
height: 350px;
width: 100%;
object-fit: cover;
opacity: .4;
}
.products{
margin-left: 560px;
margin-top: 360px;
}
.footy{
color: white;
background: black;
height:140px;
width: 100%;
}
.about_info{
width: 80%;
float: left;
font-size: 14px;
margin-left: 30px;
}
.about_us{
margin-left: 30px;
}
.reach_out{
float: left;
margin-top: -90px;
margin-left: 10px;
}
.account{
margin-left:
}
.follow{
float: right;
margin-right: 30px;
display: inline-block;
}
.product_line{
height: 250px;
width: 100%;
background: white;
}
.protein{
margin-bottom: 25px;
padding-bottom: 20px;
}
.social{
float: right;
margin-top: 30px;
}
form{
width:100%;
text-align:center;
}
input[type="text"] {
-webkit-appearance: none;
outline: none;
border: none;
}
.search-wrap {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
border: 2px solid white;
border-radius: 20px;
-moz-transition: all 0.25s ease 0.3s;
-o-transition: all 0.25s ease 0.3s;
-webkit-transition: all 0.25s ease;
-webkit-transition-delay: 0.3s;
transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
top: 90%;
left: 90%;
width: 16px;
height: 2px;
background-color: white;
border-radius: 1px;
-moz-transition: width 0.15s ease 0.55s;
-o-transition: width 0.15s ease 0.55s;
-webkit-transition: width 0.15s ease;
-webkit-transition-delay: 0.55s;
transition: width 0.15s ease 0.55s;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.search-wrap input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.eks:before, .eks:after {
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.eks:before {
top: 0px;
background-color: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.eks:after {
bottom: 0px;
background-color: white;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open {
width: 160px;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.search-wrap.open:before {
width: 0px;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open input {
opacity: 1;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
width: 15px;
right: 12px;
}
.search-wrap.open .eks:before {
top: 9px;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
bottom: 9px;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrap:before, .eks:before, .eks:after {
content: "";
position: absolute;
display: block;
}
a{
color: white;
}
a:hover{
color: red;
}
.reach_out{
list-style-type: none;
}
.links{
margin-top: 30px;
margin-right: 30px;
list-style-type: none;
}
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .fa-twitter {
color: #4099ff;
}
.icon-button .fa-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .fa-instagram {
color: #517fa4;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.production {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
filter: blur(3px);
opacity: 0.5;
}
.box:hover {
transform: scale(1.1);
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
}
.box:hover .production {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
transition: opacity 0.3s linear 0.75s;
}
form{
background: white;
text-align: center;
overflow: scroll;
padding: 0;
margin: 0;
max-height: 400px
}
/* This is for pop window */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
<ul>
<li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
<li>Home </li>
<li>Shop </li>
<li>About Us</li>
<li><div class="search-wrap" js-ui-search>
<input type="text" placeholder="Search..." / js-ui-text>
<span class="eks" js-ui-close></span>
</div> </li>
</ul>
</nav>
<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img>
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<form action="#">
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname"><br><br>
<input type="submit" value="Submit">
</form
<center><button name="close">Close Pop-up</button></center>
</div>
<div class="product_line">
<div class="row">
<div class="col-xs-12">
<span class="products text-center">View other products</span>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
</div>
</div>
</div>
<footer class="footy">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-xs-4">
<h4 class="about_us">About Us </h4>
</div>
<div class="col-xs-4">
<h4 class="account text-center"> My Account </h4>
</div>
<div class="col-xs-4">
<h4 class="follow"> Follow Us </h4>
</div>
<div class="row">
<div class="col-xs-4">
<p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.click to read more</p>
</div>
<div class="col-xs-4">
<ul class="links text-center">
<li> Search </li>
<li> About Us </li>
<li>Privacy Policy </li>
<li> Refund Policy </li>
<li> Shipping and Delivery </li>
<li> Ambassador Program </li>
<li> Retailers/Distributors </li>
</ul>
</div>
<div class="col-xs-4">
<ul class="social">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-youtube"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ul class="reach_out">
<li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs#dynamikmuscle.com </li>
</ul>
</div>
</div>
</div>
</footer>
Here is the link to fiddle

You will need to format your
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<center><button name="close">Close Pop-up</button></center>
</div>
But you did not mention how do you want your popup to be displayed, i.e, center ? or anything other information. This works for me and looks good enough.

Categories

Resources