How to make a responsive navigation bar with menu icon

Question

I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.

 .topnav { position: relative; overflow: hidden; background-color: #a2d4c3; margin: 3px 50px 3px 50px; border: 1px solid black; border-radius: 5px; } .topnav a { float: left; text-align: center; padding: 14px 16px; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } @media screen and (max-width: 760px) { .topnav a { float: none; display: block; } } ul { list-style-type: none; margin: 0; padding: 0; } .hidden:hover a { background-color: #dab756; display: block; } .hidden:hover ul a:hover { color: #fff; } .hidden li ul { display: none; } .hidden li { display: block; float: none; } .hidden ul li a { width: auto; min-width: auto; display: block; } .hidden .hidden:hover li a { display: block; } @media screen and (max-width: 750px) { .hidden ul { position: static; display: none; } .hidden li a { width: 100%; } }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link </head> <body> <header id="header"> <div class="topnav"> <ul class="hidden"> <li><a href="#">Menu</a></li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> </div> </header> </body> </html>

Answer 1

you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.

<a href="javascript:void(0);" class="icon" onclick="myFunction()">
  <i class="fa fa-bars"></i>
</a>
    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
           x.className = "topnav";
        }
      }
   </script>

or refere this example

Answer 2

Now I think that this snippet is the same as you want...

 body { font-family: sans-serif; } * { box-sizing: border-box; } header { background: #181818; height: 200px; padding-top: 40px; } .inner { max-width: 1000px; margin: 0 auto; padding: 0px 20px; position: relative; } .logo { text-decoration: none; color: #777; font-weight: 800; font-size: 30px; line-height: 40px; } h1 { text-align: center; width: 100%; margin-top: 120px; color: #eee; font-weight: 800; font-size: 40px; } nav > ul { float: left; } nav > ul > li { text-align: center; line-height: 40px; margin-left: 70px; } nav > ul li ul li { width: 100%; text-align: left; } nav ul li:hover { cursor: pointer; position: relative; } nav ul li:hover > ul { display: block; } nav ul li:hover > a { color: #777; } nav > ul > li > a { cursor: pointer; display: block; outline: none; width: 100%; text-decoration: none; } nav > ul > li { float: left; } nav a { color: white; } nav > ul li ul { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 2000; } nav > ul li ul li > a { text-decoration: none; } [type="checkbox"], label { display: none; } @media screen and (max-width: 750px) { nav ul { display: none; } label { display: block; background: #222; width: 40px; height: 40px; cursor: pointer; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } label:after { content: ''; display: block; width: 30px; height: 5px; background: #777; margin: 7px 5px; box-shadow: 0px 10px 0px #777, 0px 20px 0px #777 } [type="checkbox"]:checked ~ ul { display: block; z-index: 9999; position: absolute; right: 20px; left: 20px; } nav a { color: #777; } nav ul li { display: block; float: none; width: 100%; text-align: left; background: #222; text-indent: 20px; } nav > ul > li { margin-left: 0px; } nav > ul li ul li { display: block; float: none; } nav > ul li ul { display: block; position: relative; width: 100%; z-index: 9999; float: none; } h1 { font-size: 26px; } }

 <header> <div class="inner"> <nav> <input type="checkbox" id="nav" /><label for="nav"></label> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> </nav> </div> </header>

How to make a responsive navigation bar with menu icon

Question

2 answers

solution1
1 2019-02-06 14:08:29

solution2
1 ACCPTED 2019-02-06 20:03:31

How to make a responsive navigation bar with menu icon

Question

2 answers

solution1 1 2019-02-06 14:08:29

solution2 1 ACCPTED 2019-02-06 20:03:31

solution1
1 2019-02-06 14:08:29

solution2
1 ACCPTED 2019-02-06 20:03:31