Solution 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 {
 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>
<meta name="viewport" 
content="width=device-width, initial- 
<link rel="stylesheet" href="">
<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>
 <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>

Problem :

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() {
    $('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;
  } {
    content: 'f00d' !important;

/*Navbar full Screen*/

.toggle {
  display: none;
<script src=""></script>
<a href="" class="dropdown">
  <div class="toggle"></div>
<!--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>


Comment posted by dyon048

What do you mean with the dropdown menu don’t work? You have made toggle to display none at the end of CSS, it will make toggle invisible. If you want to make toggle invisible on mobile, try to move toggle display none to top of media query.

Comment posted by SK-the-Learner

If you have any doubts about the answer, ask here.