<style>
.mobile-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.mobile-nav a {
padding: 10px;
display: block;
text-decoration: none;
color: #333;
}
@media (min-width: 768px) {
.mobile-nav ul {
flex-direction: row;
}
}
<style>/
<script>
document.addEventListener('DOMContentLoaded', function() {
const navToggle = document.querySelector('.nav-toggle');
navToggle.addEventListener('click', function() {
document.querySelector('.mobile-nav').classList.toggle('open');
});
});
<script>/
<nav class="mobile-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<!-- Add more navigation items as needed -->
</ul>
</nav>