I have encountered an issue with my responsive menubar where the dropdown button does not have any style when clicked.
function myFunction(){
var x = document.getElementById("myMenubar");
if (x.className === "menubar"){
x.className += "responsive";
}else{
x.className = "menubar";
}
}.menubar{
position:absolute;
width:600px;
margin-left:35%;
margin-top:4.5%;
}
.menubar ul{
overflow:hidden;
}
.menubar ul li{
display:inline-block;
margin-right:15%;
list-style-type:none;
}
.menubar ul li a{
text-decoration:none;
color:white;
}
.menubar ul li.icon{display:none;}
.menubar ul li a:hover{color:red;text-decoration:none;}
.menubar ul li a.current{color:red;text-decoration:none;}
@media screen and (max-width:765px){
.menubar{
width:130px;
margin-left:57%;
}
.menubar ul li:not(:first-child) {display:none;}
.menubar ul li.icon{
float:right;
display:inline-block;
}
}
@media screen and (max-width:765px){
.menubar.responsive ul{position:relative;}
.menubar.responsive ul li.icon{
position:absolute;
right:0;
top:0;
}
.menubar.responsive ul li{
float: none;
display: inline;
}
.menubar.responsive ul li a{
text-decoration:none;
color:white;
text-align:center;
}
}<div class="menubar" id="myMenubar">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</div>What could I be doing wrong? I followed a tutorial from http://www.w3schools.com/howto/howto_js_topnav.asp and made some modifications to fit my design, but it seems like the basics should be the same.