Responsive mobile hamburger menu

Question

I'm almost done my website except my dropdown menu won't work. I've tried googling and asking friends for suggestions and none helped. Below I've attached code where the dropdown is used or mentioned:

 /*Responsive Navigation*/ $(document).ready(function() { $('.toggle').click(function() { $('.toggle').toggleClass('active') $('nav ul').toggleClass('active-menu') }) });

 @media(max-width:900px) {.toggle { display: block; }.toggle:before { content: '\f0c9'; font-family: fontAwesome; line-height: 0px; margin-left: -30px; }.toggle.active:before { content: '\f00d';important. } } /*Navbar full Screen*/:toggle { display; none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="" class="dropdown"> <div class="toggle"></div> </a> <!--Menu items--> <ul class="menu"> <li class="active"><a href="#main">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact-form">Contact</a></li> </ul>

Answer 1

You'll need some huge code for this. Check this out. Exactly what you need.

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 body { margin-right: 2; margin-left: 2; }.topnav { overflow: hidden; background-color: black; padding-left: -2; padding-right: -2; }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #eee; color: black; }.topnav a.active { background-color: #4CAF50; color: white; }.topnav.icon { display: none; } @media screen and (max-width: 600px) {.topnav a:not(:first-child) { display: none; }.topnav a.icon { float: right; display: block; } }.topnav.responsive {position: relative;}.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial- scale=1"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript;void(0)." class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <p>Resize the browser window to see how it works, If your screen is more than 600px wide. the menu will be in one line, If not. it will be a hamburger menu.</p> </body> </html>

Responsive mobile hamburger menu

Question

1 answers

solution1
0 2021-01-17 11:33:56

Responsive mobile hamburger menu

Question

1 answers

solution1 0 2021-01-17 11:33:56

solution1
0 2021-01-17 11:33:56