制作响应式导航栏

Question

I am having some trouble about turning navigation bar to responsive navigation. My toggle and navigation positioning not working quite well. The example of the site is down below. I am not quite sure what is the missing part?

 <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 I make the screen smaller navbar is not disappearing. the problem is media or is it something about main css? I really appreciate if any one can figure the problem is out! Thanks for helping me out!

Answer 1

I would recommend using Bootstrap 4 for creating a responsive navbar . You can have it done in minutes.