I've been having trouble getting the navigation locations to appear and disappear. I'm not very familiar with JavaScript, but I suspect that's the issue. My goal is to make the locations (WebDesign, Photography, SketchUp, Photoshop, About, Home) appear when I click on the three bars icon. Transforming the bars into a cross shape works fine.
function rotatebar(x) {
x.classList.toggle("rotate");
}.navigation {
display: inline-block;
float: right;
cursor: pointer;
margin-top: 80px;
margin-right: 120px;
}
.stripes {
float: right;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #fff;
transition: 0.2S;
}
/* nav button movement */
.bar2, .bar3 {
margin-top: 7px;
}
.rotate .bar1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg) translate( -5px, 7px);
}
.rotate .bar3 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg) translate( -6px, -7px);
}
.rotate .bar2 {
opacity: 0;
}
/* nav locations */
.navloc {
display: inline;
color: #fff;
font-family: Open sans;
text-align: center;
cursor: pointer;
margin-right: 30px;
transition: 0.2S;
}
.loc {
margin: 0;
padding: 0;
float: left;
margin-left: 30px;
cursor: pointer;
}
.loc:hover {
color: #ff0000;
border-bottom: 2px solid;
margin-bottom: -2px;
}
/* nav locations movement */
.rotate .navloc {
opacity: 1;
}<div class="navigation" onclick="rotatebar(this)">
<div class="navloc">
<p class="loc">WebDesign</p>
<p class="loc">Photography</p>
<p class="loc">SketchUp</p>
<p class="loc">Photoshop</p>
<p class="loc">About</p>
<p class="loc">Home</p>
</div>
<div class="stripes">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>