Struggling with making the navigation bar responsive. The toggle and positioning are not working properly. See the example below. Can't figure out what's missing?
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "gnav") {
x.className += " responsive";
} else {
x.className = "gnav";
}
}
</script>#header .gnav {
position: relative;
left: 0;
bottom: 0;
z-index: 1000;
width: 587px;
height: 75px;
overflow: hidden; /**/
}
.gnav a {
float: left;
display: block;
}
.gnav .icon {
display: none;
}
#header .gnav h1 {
float: left;
}
#header .gnav ul {
float: left;
width: 351px;
}
#header .gnav li {
float: left;
}
#ul_menu{
/*
position:relative;
width:400px;
list-style:none;
text-align:center;
top:100px;
*/
}
#ul_menu li{
/*
width:200px;
float:left;
*/
position:relative;
}
#ul_menu li a{
/*
width:198px;
background:#EE0088;
float:none;
height:30px;
display:block;
border:1px solid #FCF;
color:#FFF;
*/
}
#header .gnav li .sub_list {
position: absolute;
bottom: 28px;
left: 0;
width: 140px;
padding: 10px 0 0 0;
background: #1e2d68;
}
#header .gnav li .sub_list li {
float: none;
padding: 0 5px 10px 20px;
background: #1e2d68;
color: #fff;
font-size: 11px
}
#header .gnav li .sub_list li a {
color: #fff;
}
#header .gnav li .sub_list.sub01 {
width: 100px;
}
@media screen and (max-width: 600px) {
.gnav a:not(:first-child) {display: none;}
.gnav .icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.gnav.responsive {position: relative;}
.gnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.gnav.responsive a {
float: none;
display: block;
text-align: left;
}
}<div class="gnav clearfix" id="myTopnav">
<h1><a href="index.html"><img src="images/index/logo.gif" width="236" height="75" alt="株式会社ジェイウィル J-WILL CORPORATION"></a></h1>
<ul id="ul_menu" class="clearfix">
<li><a href="index.html"><img src="images/common/gnav01.gif" width="111" height="38" alt="HOME"></a></li>
<li>
<a href="company/index.html"><img src="images/common/gnav02.gif" width="100" height="38" alt="企業情報"></a>
<ul class="sub_list sub01">
<li><a href="company/index.html">代表ご挨拶</a></li>
<li><a href="company/index.html#sc02">行動指針</a></li>
<li><a href="company/index.html#sc03">企業概要</a></li>
</ul>
</li>
<li>
<a href="business/index.html"><img src="images/common/gnav03.gif" width="140" height="38" alt="事業内容"></a>
<ul class="sub_list sub02">
<li><a href="business/index.html">ジェイウィルの強み</a></li>
<li><a href="business/index.html#sc03">販売実績</a></li>
<li><a href="business/index.html#sc06">マンション一棟<br>仲介実績</a></li>
<li><a href="business/index.html#sc02">マンション用地<br>仲介実績</a></li>
<li><a href="business/index.html#sc05">戸建用地仲介実績</a></li>
<li><a href="business/index.html#sc01">事業概要</a></li>
</ul>
</li>
<li><a href="staff/index.html"><img src="images/common/gnav04.gif" width="111" height="37" alt="社員紹介"></a></li>
<li><a href="careers/index.html"><img src="images/common/gnav05.gif" width="100" height="37" alt="採用情報"></a></li>
<li><a href="contact/"><img src="images/common/gnav06.gif" width="140" height="37" alt="お問い合わせ"></a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
</div>The icon is not toggling and when I make the screen smaller, the navbar does not disappear. Is the issue related to media queries or is there something wrong with the main CSS? Appreciate any help in identifying the problem! Thanks for your assistance!