Develop Reference

Responsive Navigation Hamburger Menu not working

I'm trying to make my navigation responsive but when i tried to resize my window, my hamburger doesn't allow the dropdown function to work. I took both the navigation and responsive hamburger online so is there somewhere that might be overwriting the hamburger ?
This is my HTML
<header>
<div class="logo">
<p>LEGEND</p>
<div class= "hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
This is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a, button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
This is my css when it's responsive
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-botton: 12px;
}
}
This is my javascript
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onClick = function() {
navBar = document.querySelector(".nav-bar");
navbar.classList.toggle("active");
}
</script>

UPDATE
I revised the solution so that the 2 blocks are for:
In small screen but active is not on
In small screen and active is on
This separation protects the style from broken when transition happen as active toggles.
More styles can be added to the first block to define how this list should look like, such as making it display the list in column.
Example:
.nav-bar ul {
display: flex;
flex-direction: column;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
Original
This is because your JS code has some syntax error. Here is what to do:
Use const to declare hamburger and navbar.
Call addEventListener on hamburger to add the function for toggling class of navbar
Follow the below example to revise your code, or visit a live demo of it fixed here: codepen
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navbar.classList.toggle("active"));
Hope this solution will help.

Your code has nothing wrong, just few typos in your JavaScript:
You have onClick instead of onclick
navbar instead of navBar at navbar.classList.toggle("active")
Corrected version
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
Extra (Change display: block; to display: grid; in .nav-bar ul selector in CSS media query to display dropdown in vertical list)
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Better Solution
Quote from MDN Web Docs, as in this link:
The recommended mechanism for adding event handlers in web pages is the addEventListener() method
You may use addEventListener() to achieve the same result:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
Alternate Solution
For readers who are more familiar to add() / remove(), here's some alternatives:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
</script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a,
button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
#media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-bottom: 12px;
}
}
<header>
<div class="logo">
<p>LEGEND</p>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>MY ACCOUNT</li>
<li>SEARCH</li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>

How can I make the social links in my mobile menu fit together on one line?

I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>

Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>

The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css

Footer has a white space to the right

Basically, as you will see, when i preview the device in mobile S, the footer does not fill the entire browser width unlike the nav bar. This problem is happening from mobile S size to laptop L size!
The code in jsFiddle is more complete!
https://imgur.com/l131R3E
How can i get rid of this white space?
Code: https://jsfiddle.net/84td5z1x/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
/*Ignore this*/
div.whiteSpace {
width: 100%;
height: 1000px;
}
/*Mobile navBar Burger*/
.burger {
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div {
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
/*Background Menu*/
nav.menu {
width: 100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu {
position: fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img {
width: 180px;
float: left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li {
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i {
font-size: 16px;
}
nav ul.ulSecções li a.loja {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/*Footer*/
body footer div.footer {
width: 100%;
height: 170px;
background-color: rgb(24, 24, 24);
}
footer div.icons {
width: 100%;
height: auto;
margin: auto;
padding: 20px 0px;
}
body footer div.icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 10px 10px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 28px;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
#media screen and (max-width: 980px) {
nav.menu {
width: 100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 40vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 40px;
letter-spacing: 0em;
opacity: 0.9;
padding: 0px 10px;
}
nav ul.ulSecções li a.loja {
font-size: 35px;
}
nav ul.ulSecções li a i {
font-size: 35px;
}
div.burger {
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div {
width: 40px;
height: 5px;
margin: 4px;
}
/*Footer*/
body footer div.footer {
width: 100%;
/*Erro aqui!!*/
height: 250px;
background-color: rgb(24, 24, 24);
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 15px 30px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 50px;
}
}
.navActive {
transform: translateX(0%)
}
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
</li>
<li>Cursos
</li>
</li>
<li>Conteúdos Especiais
</li>
<li>Recursos
</li>
<li> Contatos </li>
<li> </i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="whiteSpace"></div>
<!--Footer-->
<footer>
<div class="footer">
<div class="icons">
<ul>
<li> <i class="fa fa-instagram" aria-hidden="true"></i> </li>
<li> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li>
<li> <i class="fa fa-youtube-play" aria-hidden="true"> </i> </li>
</ul>
</div>
</div>
</footer>

Add body {margin: 0;} to reset default margin.

At the top of your CSS, add.
*{
margin: 0;
}
This should remove the pre-existing margin, that is present by default on browsers.
I always start my css with
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Know more about the CSS universal selector (*)

The body is set to margin 8px, set it to 0. The above answer is correct.
https://imgur.com/a/Vy2i5YR

Problems with the responsive navigation menu

I have a problem with my navigation menu... it works great on desktops and notebooks, but not on mobile devices.
So, someone can help-me?
Here is the following code for the menu in Desktops/Notebooks screens:
#media only screen and (min-width: 768px) {
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: #b42024;
text-decoration: none;
color: #fff;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 23px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: #b42024;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.sub__li a.active-sub {
background: #fff;
color: #000;
text-decoration: none;
}
}
input#control-nav {
visibility: hidden;
position: absolute;
left: -9999px;
opacity: 0;
}
<header>
...
...
...
</header>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav>
<ul class="nav__cat">
<li class="nav__li">
Home
</li>
<li class="nav__li">
Sobre a Gente
<ul class="sub__category">
<li class="sub__li">
Sub-page
</li>
<li class="sub__li">
Other sub-page
</li>
<li class="sub__li">
Another sub-page
</li>
</ul>
</li>
<li class="nav__li">
How find us
</li>
<li class="nav__li">
Contact us
</li>
</ul>
</nav>
I try to transform this menu in Responsive... and i get this:
#media (max-width: 767px) {
.control-nav { /* label icon */
position: absolute;
right: 20px;
top: 20px;
display: block;
width: 30px;
padding: 5px 0;
border: solid #333;
border-width: 3px 0;
z-index: 2;
cursor: pointer;
}
.control-nav:before {
content: "";
display: block;
height: 3px;
background: #333;
}
.control-nav-close {
position: fixed; /* label layer */
right: 0;
top: 0;
bottom: 0;
left: 0;
display: block;
z-index: 1;
background: rgba(0,0,0,0.4);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/* checked nav */
input#control-nav {
visibility: visible;
}
input#control-nav:focus ~ .control-nav {
border-color: #000;
box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
}
input#control-nav:focus ~ .control-nav:before {
background: #000;
}
input#control-nav:checked ~ nav,
input#control-nav:checked ~ .control-nav-close {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
/*
/ nav
*/
nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 250px;
border-left: 1px solid #ccc;
background: #fff;
overflow-x: auto;
z-index: 2;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
nav ul {
list-style: none;
background: #1c1c1c;
padding: 5px 0;
}
nav li a {
display: block;
padding: 0 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
line-height: 2em;
height: 2em;
border-bottom: 1px solid #383838;
}
nav li:last-child a {
border-bottom: none;
}
nav li a:hover,
nav li a:focus {
color: #1c1c1c;
background: #ccc;
}
}
<header>
...
...
...
</header>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav>
<ul class="nav__cat">
<li class="nav__li">
Home
</li>
<li class="nav__li">
Sobre a Gente
<ul class="sub__category">
<li class="sub__li">
Sub-page
</li>
<li class="sub__li">
Other sub-page
</li>
<li class="sub__li">
Another sub-page
</li>
</ul>
</li>
<li class="nav__li">
How find us
</li>
<li class="nav__li">
Contact us
</li>
</ul>
</nav>
I appreciate it the help!
Oh and sorry for my English!, It's not great.

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