CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Onyx
Onyx

Reputation: 5782

Mobile responsive dropdown navigation bar works on small width browser but not on my phone

Mobile responsive dropdown navigation bar works on small width browser but not on my phone. When I make my browser width <1000 px and click the dropdown element, the menu appears, however, when I try to open it on my phone, nothing happens. I have absolutely no idea what might be causing this as I have not tried making my website responsive before and therefore I have little knowledge.

$('.dropdown').on('click', function() {
  $('.container').children().toggle();
  $('.dropdown').show();
  $('.space').hide();
});
.navigation {
  background-color: #151719;
}

.container {
  display: flex;
}

.container>li {
  padding: 10px;
  text-align: center;
  font-size: 1em;
  color: white;
  box-sizing: border-box;
  background-color: #151719;
  list-style-type: none;
}

.space {
  flex: 1;
}

.dropdown {
  display: none;
}

@media all and (max-width: 1100px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex: 1 1 100%;
  }
  .space {
    display: none;
  }
  .dropdown {
    display: block;
  }
  .container>li {
    display: none;
  }
  .container>.dropdown {
    display: block;
    cursor: pointer;
  }
  .dropdownImg {
    float: right;
  }
}

@media only screen and (max-width: 600px) {
  .flex-grid-home {
    display: none;
  }
  .flex-grid {
    display: block;
  }
  .flex-grid {
    margin-right: 10px;
    margin-left: 10px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="container">
      <li class='dropdown'></li>
      <li class='ey'><a href="">1</a></li>
      <li class='ey'><a href="">2</a></li>
      <li class='ey'><a href="">3</a></li>
      <li class='ey'><a href="">4</a></li>
    </ul>
  </div>
</nav>

Upvotes: 0

Views: 25

Answers (1)

Siddhesh damble
Siddhesh damble

Reputation: 94

I would recommend you to check if you added the below line in your header :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

if not added the please add the above code in header section.

<head>
<title>sample header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Upvotes: 0

Related Questions