I am experiencing an issue with the mobile responsive dropdown navigation bar on my website. It works perfectly fine on a small width browser, but when I try to open it on my phone, nothing happens. This is puzzling me as I am new to making websites responsive and have limited knowledge in this area.
$('.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>