Develop Reference

Can't hide a submenu on mobile and show it on click

It's has been answered in several ways I've found on StackOverflow, but can't get it to work on my Wordpress theme. Very new to js/JQuery, beginning when I started troubleshooting this. Here is my website.
Right now, my submenu for "WORK" opens on hover, which is ok on desktop, but on mobile screens below 767px, my nav menu changes into a button operated by this jQuery function, and my whole "WORK" submenu is open, listing everything out and taking up a lot of space:
(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
;
And when I add this code from this post, the whole menu button disappears on mobile and nothing is clickable:
$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
var $el = $('ul',this); // element to toggle
$('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
$el.stop(true, true).slideToggle(400); // toggle element
return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
e.stopPropagation(); // stop events from bubbling from sub menu clicks
});
});​
I have tried a few different ones, like this one, which also made the button disappear and seem to clash with the jQuery button code.
This PHP seems to define the navigation classes:
<?php
wp_nav_menu(array(
'container_id' => 'cssmenu',
'theme_location' => 'menu-1',
'fallback_cb' => 'gusto_photography_Menu_Walker::fallback',
'walker' => new Gusto_Photography_Menu_Walker(),
));
?>
with the corresponding CSS here:
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#cssmenu {
background: transparent;
margin: 0;
width: auto;
padding: 0;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#cssmenu ul {
list-style: none;
margin: 0 auto;
padding: 0;
float: none;
text-align: left;
padding-top: 15px;
}
#cssmenu ul:after,
#cssmenu:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu a {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
text-transform: uppercase;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
display: inline-block;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 0;
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #000;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
z-index: 9999;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: '';
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 7px 7px 7px 7px;
text-align: left;
}
#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
color: #777;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #eee;
}
#cssmenu ul li ul li:hover>ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu>ul>li {
display: block;
}
#cssmenu.align-center>ul>li {
float: none;
display: inline-block;
}
#cssmenu.align-center>ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right>ul {
float: right;
}
#cssmenu.align-right>ul>li:hover>ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover>ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu>ul>li:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 1px;
top: 0;
z-index: 0;
border-bottom: 0px solid #000;
background: transparent;
-webkit-transition: border-bottom .2s;
-moz-transition: border-bottom .2s;
-ms-transition: border-bottom .2s;
-o-transition: border-bottom .2s;
transition: border-bottom .2s;
}
#cssmenu>ul>li.has-sub>a {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
}
#cssmenu>ul>li.has-sub>a:after {
display: block;
content: '';
background: #ffffff;
height: 2px;
width: 12px;
margin: 10px 0 0;
position: absolute;
border-radius: 13px;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li.has-sub>a:before {
display: block;
content: '';
border: 4px solid transparent;
border-top-color: #000;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li>a {
color: #000;
padding:15px 15px 0;
padding-left: 0;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
z-index: 2;
position: relative;
}
#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
height: 100%;
}
#cssmenu>ul>li:hover>a {
color: #000;
}
#cssmenu>ul>li.active>a {
}
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
}
#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
border-top-color: #eee;
}
#cssmenu>ul>li:hover>ul {
left: 0;
}
#cssmenu>ul>li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu>ul>li>a {
width: auto;
display: inline-block;
}
#cssmenu>ul>li {
width: auto;
}
#cssmenu>ul>li>ul {
width: 170px;
display: block;
}
#cssmenu>ul>li>ul>li {
width: 170px;
display: block;
}
.main-navigation {
margin-bottom: 0em;
}
#media all and (max-width: 767px),
{
#cssmenu>ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu>ul>li>ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li>a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center>ul {
text-align: left;
}
#cssmenu.align-center>ul>li {
display: block;
}
#cssmenu>ul.open {
max-height: 1000px;
border-top: 0px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul>li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
padding: 6px;
text-align: center;
}
#cssmenu ul>li:after {
display: none;
}
#cssmenu ul li.has-sub>a:after,
#cssmenu ul li.has-sub>a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover>ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover>ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover>ul>li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #333;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover>a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
margin-top: 20px;
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #000;
cursor: pointer;
border: 2px solid #000;
}
#cssmenu #menu-button:after {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 26px;
}
}
I'm not sure why the jQuery I'm adding is not affecting it the submenu at all. Thank you for your help.

You can try to target the ul inside of the 'work' li item and use display:none to hide it. Then on click of the work li you can add and remove a class for example class="open" to close or open the submenu using jQuery.
<ul class="menu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li class="has-children">Click me!
<ul class="submenu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
The CSS would be something like this:
.menu {
.has-children {
color: red;
cursor:pointer;
&.open {
.submenu {
display:block;
}
}
}
& :nth-child(4n) {
ul {
display:none;
}
}
}
and the jQuery something like this:
$( document ).ready(function() {
$('.has-children').on('click', function(){
if ($('.has-children').hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
}
});
});
It will make more sense if you see it working.
I've put together a working example in the following link: https://codepen.io/Angel-SG/pen/JwXRZo

Problem with css animation: position relative and value for left doesn't work apparently together

Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?

This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/

I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)

Navigation Overlay Hamburger Menu Click Issues

I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.
I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.
When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?
When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this 'flashing' when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.
$(document).ready(function() {
$(".menu-btn a").click(function() {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if ($(this).hasClass('btn-close')) {
$(".navbar").css("background-color", "grey");
} else if (scroll > 100) {
$(".navbar").css("background-color", "#CEB400");
}
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if ($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#CEB400");
}
} else {
$(".navbar").css("background-color", "grey");
}
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
/* font-size: 32px; */
}
.menu-btn a {
display: flex;
text-decoration: none;
color: #ffffff;
/* safari hack */
align-items: center;
}
.btn-open:after {
color: inherit;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-open:hover:after {
color: inherit;
}
.btn-close:after {
color: inherit;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-close:hover:after {
color: #ffffff;
}
.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
color: #ffffff!important;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0);
}
.overlay .menu {
margin: 150px 20px;
/* width: 80%; */
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 10px 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 16px;
color: #ffffff;
/* line-height: 18px; */
font-weight: 600;
position: relative;
/* top: -5px; */
right: 10px;
}
.navbar-text div {
display: inline-block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-contact svg {
margin-left: 10px;
font-size: 22px;
}
.header-contact {
margin-right: 75px;
}
.header-contact a {
color: #ffffff;
}
.header-contact {
font-weight: 600!important;
font-size: 16px!important;
}
.navbar {
-webkit-transition: background-color 500ms ease-in-out;
-ms-transition: background-color 500ms ease-in-out;
transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top" style="background-color: grey;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG

To solve both your problems :
You need to remove the onClick event of your overlay, I.E. those lines :
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
This will stop triggering event when you click on overlay.
Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.

Just remove this line of code from the script
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

Javascript button to open a modal; button doesn't work when in a list

Basically, I want to press a button (matched to a person) that brings up a pop-up (right now using a modal) of an of another page which will vary based on which person it is. I am using a basic template from the w3school and I can get one button working, but when I try and add a button into the list to match a person, the modal does not open. Obviously for each button to be assigned to one person they will need to have their own element id, but why cant I get even one button to work?
Its the "show on map" button in the snippet below.
The top most "show on map" button works in the sense that it brings up the modal, but the same buttons in the list do nothing.
Thank you in advance.
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/*DESKTOP*/
/* The Modal (background) */
#media screen and (min-width: 801px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
/*MOBILE*/
/* The Modal (background) */
#media screen and (max-width: 800px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #810008;
}
a.menu-link {
color: #ffc948;
display: block;
text-decoration: none;
padding-top: 25px;
}
.menu-link span {
border-bottom: solid 3px #000;
border-top: double 10px #000;
display: inline-block;
height: 4px;
margin: 0 5px -3px 0;
width: 30px;
}
.menu-link:hover span {
border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
clear: both;
display: flex;
flex-flow: column;
margin: 0;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-left: 15%;
}
.menu.active {
background: #640006;
border-bottom: 1px solid #64006;
border-top: 1px solid #64006;
margin: 1em 0 1em -12px;
max-height: 55em;
width: 100vw;
}
.js .menu > ul ul.active {
margin: 0;
max-height: 55em;
padding: 0;
}
.menu > ul {
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
.menu li a {
color: #ffc948;
display: inline-block;
font-size: 1.04em;
letter-spacing: .05em;
line-height: 2.5em;
text-decoration: none;
}
span.has-subnav {
display: block;
font-size: 1em;
line-height: 2.5em;
position: absolute;
right: 20px;
padding: 0 0.5em;
top: 0;
}
/*NAV MENU CSS MOBILE */
#media screen and (max-width: 800px) {
.menu,
.menu > ul ul {
margin: 0;
max-height: 0;
overflow: hidden;
}
.menu li a {
border-bottom: 1px solid #ffc948;
display: block;
padding-left: 15px;
}
.menu li li a {
padding-left: 50px;
}
.menu li:last-child a {
border: none;
}
.menu li li:last-child a {
border-bottom: 1px solid #ffc948;
}
.menu li:hover {
background: #640006;
}
}
.menu li a:hover {
background: #ffc948;
color: black;
}
/*NAV MENU CSS DESKTOP*/
#media screen and (min-width: 801px) {
nav {
border-bottom: 1px solid #ffc948;
}
a.menu-link {
display: none;
}
.js .menu,
.js .menu > ul ul {
max-height: none;
overflow: visible;
}
.js .menu > ul li:hover > ul {
display: flex;
}
.menu ul {
display: flex;
flex-flow: row;
height: 44px;
justify-content: space-between;
margin: 0;
padding: 0;
}
.menu span.has-subnav {
display: none;
}
.menu li a:hover {
color: rgb(0, 0, 0);
}
.menu li li a:hover {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
.menu ul ul {
background: #640006;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 2px 2px 5px 5px;
border-top: solid 2px transparent;
display: none;
height: auto;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 43px;
width: 150px;
z-index: 999;
}
.chrome .js .menu > ul ul {
top: 43px;
}
.menu ul ul.wide {
width: 300px;
}
.menu ul ul li {
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
}
.menu > ul ul li:last-child {
border-bottom: none;
}
.menu ul ul li a {
display: block;
padding-left: 10px;
}
}
a {
text-decoration: none;
color: #ffc948;
}
ul,
li {
list-style: none;
vertical-align: middle;
}
ul.list {
padding-left: 20px;
}
.alphalist {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: auto;
height: 100%;
}
.list li {
border-bottom: 1px solid #ffc948;
line-height: 44px;
height: 44px;
}
.list .divider {
font-size: 20px;
font-weight: bold;
background: #fafafa;
box-shadow: -60px 0 0 #fafafa;
line-height: 28px;
height: 28px;
margin-top: -1px;
position: -webkit-sticky;
top: 44px;
}
h1 {
color: #ffc948;
font-size: 30px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: 30px;
}
h2 {
color: #ffc948;
font-size: 20px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: auto;
margin: auto;
}
h3 {
line-height: 44px;
height: 44px;
color: #ffc948;
width: 100%;
position: absolute;
text-align: center;
z-index: 10;
}
#scrolling {
padding-top: 44px;
padding-right: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
#media (-webkit-min-device-pixel-ratio: 2) {
.list .divider {
top: 0;
}
}
.modal-button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
.button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
<button id="myBtn">Show on Map</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times</span>
<h2>Career Fair Map</h2>
</div>
<div class="modal-body">
<iframe src="map.html" width="500px" height="700px">
</iframe>
</div>
</div>
</div>
<div id="scrolling">
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster
<button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
<button class="button" id="myBtn">Show on Map</button>
<li>Andrew WifKinson
</li>
<li>Archibald Carrington
<button class="modal-button" id="myBtn">Show on Map</button>
</li>
<li>Ariana Clapton
</li>
<li>Ashley Carter
</li>
<li class="divider" id="b">B</li>
<li>Barney Mercer
</li>
<li>Barry Goodman
</li>
<li>Brenda Brown
</li>
<li>Brooke Creighton
</li>
<li class="divider" id="c">C</li>
<li>Camilla Kapinksy
</li>
<li>Caroline Miller
</li>
<li>Charlotte Gardner
</li>
<li>Cynthia Monroe
</li>
<li class="divider" id="e">E</li>
<li>Elizabeth Abramson
</li>
<li>Elizabeth Cook
</li>
<li>Ernie Carter
</li>
<li>Evelyn Nash
</li>
<li class="divider" id="f">F</li>
<li>Fyodor Dostoevsky
</li>
</ul>
</div>

Id's should always be unique.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
That is also the origin of your problem. document.getElementById("theid"); will return the first element (and also the only element expected to use this id). However you want to assign your onclick method to multiple buttons.
You should consider to use the name attribute instead. Then you can use document.getElementsByName("myBtn") in order to loop through all buttons and register your listener. The code below contains comments that should explain my changes.
// Get the modal
var modal = document.getElementById('myModal');
// Get all buttons that should opens the modal
var btns = document.getElementsByName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// The iframe inside of the Modal
var modalIFrame = document.getElementById("modal-iframe");
// When the user clicks the button, open the modal
for(var i = 0; i < btns.length; i++) {
(function(i) {
var btn = btns[i];
// you should use addEventListener("click", function() {}); here
btn.onclick = function() {
// this will set the iframe url every time you press a button and add the "id" of the button that was pressed as a parameter. "id" is just the current index of the for loop for now.
modalIFrame.setAttribute("src", "map.html?id=" + i);
modal.style.display = "block";
}
})(i);
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/*DESKTOP*/
/* The Modal (background) */
#media screen and (min-width: 801px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
/*MOBILE*/
/* The Modal (background) */
#media screen and (max-width: 800px) {
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, .4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: relative;
bottom: 0;
background-color: clear;
width: 500px;
height: 700px;
margin: 0% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
border: solid 2px;
border-color: #ffc948;
overflow: hidden;
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #640006;
color: white;
height: 2em;
}
.modal-body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #810008;
}
a.menu-link {
color: #ffc948;
display: block;
text-decoration: none;
padding-top: 25px;
}
.menu-link span {
border-bottom: solid 3px #000;
border-top: double 10px #000;
display: inline-block;
height: 4px;
margin: 0 5px -3px 0;
width: 30px;
}
.menu-link:hover span {
border-color: #666;
}
.menu,
.menu > ul,
.menu > ul ul {
clear: both;
display: flex;
flex-flow: column;
margin: 0;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-left: 15%;
}
.menu.active {
background: #640006;
border-bottom: 1px solid #64006;
border-top: 1px solid #64006;
margin: 1em 0 1em -12px;
max-height: 55em;
width: 100vw;
}
.js .menu > ul ul.active {
margin: 0;
max-height: 55em;
padding: 0;
}
.menu > ul {
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
.menu li a {
color: #ffc948;
display: inline-block;
font-size: 1.04em;
letter-spacing: .05em;
line-height: 2.5em;
text-decoration: none;
}
span.has-subnav {
display: block;
font-size: 1em;
line-height: 2.5em;
position: absolute;
right: 20px;
padding: 0 0.5em;
top: 0;
}
/*NAV MENU CSS MOBILE */
#media screen and (max-width: 800px) {
.menu,
.menu > ul ul {
margin: 0;
max-height: 0;
overflow: hidden;
}
.menu li a {
border-bottom: 1px solid #ffc948;
display: block;
padding-left: 15px;
}
.menu li li a {
padding-left: 50px;
}
.menu li:last-child a {
border: none;
}
.menu li li:last-child a {
border-bottom: 1px solid #ffc948;
}
.menu li:hover {
background: #640006;
}
}
.menu li a:hover {
background: #ffc948;
color: black;
}
/*NAV MENU CSS DESKTOP*/
#media screen and (min-width: 801px) {
nav {
border-bottom: 1px solid #ffc948;
}
a.menu-link {
display: none;
}
.js .menu,
.js .menu > ul ul {
max-height: none;
overflow: visible;
}
.js .menu > ul li:hover > ul {
display: flex;
}
.menu ul {
display: flex;
flex-flow: row;
height: 44px;
justify-content: space-between;
margin: 0;
padding: 0;
}
.menu span.has-subnav {
display: none;
}
.menu li a:hover {
color: rgb(0, 0, 0);
}
.menu li li a:hover {
background: rgba(0, 0, 0, 0.1);
color: #fff;
}
.menu ul ul {
background: #640006;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 2px 2px 5px 5px;
border-top: solid 2px transparent;
display: none;
height: auto;
overflow: hidden;
padding: 0;
position: absolute;
text-align: left;
top: 43px;
width: 150px;
z-index: 999;
}
.chrome .js .menu > ul ul {
top: 43px;
}
.menu ul ul.wide {
width: 300px;
}
.menu ul ul li {
border-bottom: solid 1px rgba(0, 0, 0, 0.5);
display: inline-block;
position: relative;
}
.menu > ul ul li:last-child {
border-bottom: none;
}
.menu ul ul li a {
display: block;
padding-left: 10px;
}
}
a {
text-decoration: none;
color: #ffc948;
}
ul,
li {
list-style: none;
vertical-align: middle;
}
ul.list {
padding-left: 20px;
}
.alphalist {
position: fixed;
right: 0;
font-size: 12px;
text-align: center;
display: inline-block;
z-index: 2;
top: auto;
height: 100%;
}
.list li {
border-bottom: 1px solid #ffc948;
line-height: 44px;
height: 44px;
}
.list .divider {
font-size: 20px;
font-weight: bold;
background: #fafafa;
box-shadow: -60px 0 0 #fafafa;
line-height: 28px;
height: 28px;
margin-top: -1px;
position: -webkit-sticky;
top: 44px;
}
h1 {
color: #ffc948;
font-size: 30px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: 30px;
}
h2 {
color: #ffc948;
font-size: 20px;
font-family: "Baskerville Old Face";
letter-spacing: 4px;
text-align: center;
line-height: auto;
margin: auto;
}
h3 {
line-height: 44px;
height: 44px;
color: #ffc948;
width: 100%;
position: absolute;
text-align: center;
z-index: 10;
}
#scrolling {
padding-top: 44px;
padding-right: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
#media (-webkit-min-device-pixel-ratio: 2) {
.list .divider {
top: 0;
}
}
.modal-button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
.button {
background-color: #fafafa;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: inherit;
margin: 4px 2%;
float: right;
cursor: pointer;
}
<!-- Changed id="myBtn" to name="myBtn" -->
<button name="myBtn">Show on Map</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times</span>
<h2>Career Fair Map</h2>
</div>
<div class="modal-body">
<iframe id="modal-iframe" src="map.html" width="500px" height="700px">
</iframe>
</div>
</div>
</div>
<div id="scrolling">
<ul class="list">
<li class="divider" id="a">A</li>
<li>Amelia Webster
<button class="button" onclick="alert('## has been added to favorites.')">Favorite</button>
<!-- Changed id="myBtn" to name="myBtn" -->
<button class="button" name="myBtn">Show on Map</button>
<li>Andrew WifKinson
</li>
<li>Archibald Carrington
<!-- Changed id="myBtn" to name="myBtn" -->
<button class="modal-button" name="myBtn">Show on Map</button>
</li>
<li>Ariana Clapton
</li>
<li>Ashley Carter
</li>
<li class="divider" id="b">B</li>
<li>Barney Mercer
</li>
<li>Barry Goodman
</li>
<li>Brenda Brown
</li>
<li>Brooke Creighton
</li>
<li class="divider" id="c">C</li>
<li>Camilla Kapinksy
</li>
<li>Caroline Miller
</li>
<li>Charlotte Gardner
</li>
<li>Cynthia Monroe
</li>
<li class="divider" id="e">E</li>
<li>Elizabeth Abramson
</li>
<li>Elizabeth Cook
</li>
<li>Ernie Carter
</li>
<li>Evelyn Nash
</li>
<li class="divider" id="f">F</li>
<li>Fyodor Dostoevsky
</li>
</ul>
</div>

In HTML the id attribute is unique. As such, you are only ever binding to the first button with the id of myBtn (I go and get the element by id and I only get one because that's what's expected).
You will need to make the IDs unique and bind each one's click event, that or apply a class, get an array of buttons by class, and bind each button in the array.
If you had a class named showModalButton set on each button you could get the references with:
var elements = document.getElementsByClassName('showModalButton');
and then iterate over the elements and bind:
for(var i = 0; i < elements.length; ++i) {
elements[i].onclick = function() {
modal.style.display = "block";
}
}

Z-index issue on navbar

I'm having some issues with my navbar menu for my site. I want to have the main menu, a sub menu and a sub menu to that. So 3 levels total.
So far I have gotten the 2 levels to work, but I cannot get the 3rd level to go under the 2nd with z-indexing. Currently they are only on the same index it appears.
Anything I've tried messes up with the jQuery script I did for displaying the select instead of the menu when on small screens.
So how can I do this?
Fiddle (Go Products > Oticon).
HTML
<header>
<select class="menu_mobile_top">
<option>Home</option>
<option>Services</option>
<option>Products</option>
<option>Shop</option>
<option>Prices</option>
<option>About</option>
<option>Contact</option>
</select>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul class="subnav">
<li role="presentation">Service 1
<li role="presentation">Service 2
<li role="presentation">Service 3
</ul>
</li>
<li role="presentation">Products
<ul class="subnav">
<li role="presentation">Phonak</li>
<li role="presentation">ReSound</li>
<li role="presentation">Siemens</li>
<li role="presentation">Starkey</li>
<li role="presentation">Widex</li>
<li role="presentation">Oticon
<ul class="subnavoptions">
<li role="presentation">Test1</li>
<li role="presentation">Test 2</li>
</ul>
</li>
<li role="presentation">Unitron</li>
<li role="presentation">Bernafon</li>
</ul>
</li>
<li role="presentation">Shop</li>
<li role="presentation">Prices</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</header>
CSS
body {
font-size: 0;
text-align: center;
background-image: url('../images/bg.png');
background-repeat: repeat;
font-family: 'Montserrat', sans-serif;
}
header {
width: 100%;
height: 50px;
background: #304770;
z-index: 10;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 34pt;
}
a {
text-decoration: none;
color: inherit;
}
nav {
position: relative;
width: 100%;
z-index: 10;
}
a:hover {
text-decoration: none;
color: inherit;
}
::-webkit-input-placeholder {
color: #99C2EC;
}
:-moz-placeholder { /* Firefox 18- */
color: #99C2EC;
}
::-moz-placeholder { /* Firefox 19+ */
color: #99C2EC;
}
:-ms-input-placeholder {
color: #99C2EC;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.logo-div {
padding: 15px 0 10px;
}
.logo-div div {
display: inline-block;
width: 50%;
font-size: 14px;
color: #304770;
}
.center {
margin: 0 auto;
}
.nav-offset {
display: inline-block;
}
.nav {
height: 50px;
display: block;
position: relative;
list-style: none;
background: #304770;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
position: static;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav > li.active > a:before {
width: 100%;
}
.nav li:hover > a {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav > li > a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
transition: width 0.2s;
}
.nav > li:nth-last-of-type(1) > a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav > li > a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.nav li:hover .subnav {
top: 49px;
}
.subnav {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 12px;
z-index: -1;
left: 0;
margin: 0;
padding: 0;
background-color: #ccc;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnav > li {
display: inline-block;
background-color: #ccc;
margin: 0;
padding: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.subnav li:hover .subnavoptions {
top: 36px;
}
.subnavoptions {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 0px;
z-index: -2;
left: 0;
margin: 0;
padding: 0;
background-color: #EFEFEF;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnavoptions li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnavoptions li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.menu_mobile_top {
display: none;
position: relative;
font-size: 16px;
top: 5px;
background-color: #2A333F;
border: 1px solid transparent;
color: #EFEFEF;
width: 250px;
margin: 5px 0;
padding: 3px;
}
.menu_mobile_top:focus, option:focus {
outline: none !important;
border-color: orange;
}

I don't see the styles defined for third level menu. Add the following and try.
.subnavoptions li a li{
top:50px;
}