Ok I’m back.
Here’s some updated code that moves the navigation off screen when the hamburger appears and then slides it back into view when clicked (I’ve added some js for that). It’s mostly your original html but there are some subtle differences so check carefully.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/Styles/MenuFlex.css">
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#main {
max-width: 1280px;
margin: auto;
background: #eee;
padding: 10px;
min-height: 100vh;
}
.logo {
padding-right: 30px;
padding-top: 10px;
}
#navbarcontainer {
display: flex;
justify-content: space-between;
align-items: center;
}
#navbarcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
flex: 1 0 0%;
}
#navbarcontainer a {
padding: 10px;
display: block;
color: gray;
text-decoration: none;
font-size: 1rem;
}
#navbarcontainer a:hover {
background: #000;
color: #fff;
}
.icon {
padding: 5px;
margin: 0 1rem;
background: transparent;
border: none;
display: none;
font-size: 2rem;
cursor: pointer;
}
.icon .fa-times-circle,
.icon span {
position: fixed;
left: -100vw;
}
.icon:hover {
background: #fff;
}
.icon:focus {
outline: 1px dotted #ccc;
}
@media only screen and (max-width: 768px) {
body.menu-open {
overflow: hidden;
}
.icon {
display: block;
}
/* lets hide the navbar off screen but turn it into a sliding side menu for small screens*/
#navbarcontainer ul {
display: block;
position: fixed;
z-index: 99;
top: 0;
left: 0;
padding-top: 4rem;
width: 100%;
height: 100vh;
overflow: auto;
max-width: 480px;
background: #f9f9f9;
border-right: 1px solid #000;
transform: translateX(-100%);
opacity: 0;
/* transition:transform .5s ease-in-out,opacity .3s linear; allows menu to slide out slowly*/
}
.menu-open #navbarcontainer ul {
transform: translateX(0);
opacity: 1;
box-shadow: 0 0 100vw rgba(0, 0, 0, 0.5);
transition: transform 0.5s ease-in-out, opacity 0.3s linear;
}
#navbarcontainer li,
#navbarcontainer a {
background: #fff;
}
#navbarcontainer li:first-child a {
border-top: 1px solid #000;
}
#navbarcontainer a {
border-bottom: 1px solid #000;
}
.menu-open .icon .fa-times-circle {
position: fixed;
z-index: 1000;
left: 0.8rem;
top: 0.8rem;
}
/*.menu-open .icon .fa-bars{position:fixed;left:-100vw}*/
}
</style>
</head>
<body>
<div id="main">
<nav>
<div id="navbarcontainer"> <img class="logo" src="http://christyforcongress.com/images/Logo/Keep_SW_Florida_Great_Crop_200.png" alt="Keep SW Florida Great">
<ul>
<li> <a href="#home" class="active">Home</a> </li>
<li> <a href="https://secure.winred.com/christy-for-congress/donate" target="_blank">Donate</a> </li>
<li> <a href="#pacpledge">My Pledge</a> </li>
<li> <a href="#divmedia">Media</a> </li>
<li> <a href="#content">Meet Christy</a> </li>
<li> <a href="#gallery">Gallery</a> </li>
<li> <a href="#issues">Issues</a> </li>
<li> <a href="#" id="lnkcontactusdialog" class="lnkjoinus">Join Us</a> </li>
<li> <a href="https://www.facebook.com/christy.mclaughlin.102" target="_blank" id="facebook"><i class="fa fa-facebook-square" style="font-size:24px; padding-right: 1px;"></i>Facebook</a> </li>
<li> <a href="https://twitter.com/ChristyMarieEm" target="_blank" id="twitter"><i class="fa fa-twitter-square" style="font-size:24px; padding-right: 1px;"></i>Twitter</a> </li>
</ul>
<button class="icon"><i class="fa fa-bars"></i><i class="fa fa-times-circle"></i><span>Open and Close menu</span></button>
</div>
</nav>
<div class="content">
<h1>Main Page Title</h1>
<p>Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working </p>
<p>Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working Some dummy content with a <a href="#">link</a>link to check all is working </p>
</div>
</div>
<script>
(function(d ) {
'use strict';
const icon = d.querySelector( '.icon' );
const theBody = d.querySelector('body');
icon.addEventListener( 'click', function() {
theBody.classList.toggle('menu-open');
});
}( document ));
</script>
</body>
</html>
I’ve deliberately left it simple so that you can style it as required but the basic function is in place for you to work with.
Hope it helps anyway. (I’ll throw it into a codepen later).