Mobile Nav Javascript not working
I'm getting started a bit here and doing exercises at FreeCodeCamp. While working on the Site Portfolio project, I tried to add a Javascript enabled mobile nav to the site from some code in ws3schools.
The navigator renders well, but clicking on it does nothing. Here's my CodePen, any ideas what I did what is stopping it from swiping nav links on click? https://codepen.io/colum1225/pen/xLwMJG
Here's the barcode:
<!-- HTML -->
<div class="topnav" id="myTopnav">
<h3>Brandon Ray</h3>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<!-- CSS -->
.topnav {
background-color: #2C8597;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 9;
}
.topnav h3 {
float: left;
color: #f2f2f2;
font-family: sans-serif;
font-size: 1.5em;
padding-left: 30px;
letter-spacing: .04em;
font-weight: 500;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 27px 30px 27px 30px;
text-decoration: none;
font-size: 1.25em;
font-family: sans-serif;
}
.topnav a:hover {
background-color: #ddd;
color: black;
transition: .5s;
}
.topnav a:active {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
font-size: 1.3em;
}
@media screen and (max-width: 640px) {
.topnav a {display: none;}
.topnav .icon {
float: right;
display: block;
color: white;
margin-right: 30px;
}
}
@media screen and (max-width: 640px) {
topnav.responsive {position: relative;}
topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
topnav.responsive a {
float: none;
display: block;
text-align: right;
}
}
<!-- JS -->
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
source to share
Great job so far.
You are missing the dot in front of the selector topnav
for your rules .responsive
. See Fixed CSS below.
@media screen and (max-width: 640px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: right;
}
}
Overlap fixing
To fix your first mobile navigation dropdown menu overlap with your menu icon, try adding margin-top
to the first menu item. A good margin size would be the menu height (82px).
This rule will look like this:
.topnav.responsive a:first-of-type {
margin-top: 82px;
}
Enable this rule with other .topnav.responsive rules (line ~ 77).
source to share
In your css, you need a period before topnav
:
@media screen and (max-width: 640px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: right;
}
}
or you can remove the topnav element and just have the responsive
part.
Location fix:
Change the position of the icons back to relative and place the icon at the top of your nav:
Html
<div class="topnav" id="myTopnav">
<h3>Brandon Ray</h3>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
</div>
CSS
.topnav.responsive a.icon {
position: relative;
right: 0;
top: 0;
}
source to share