Hey there, I'm currently working on making my navigation bar responsive but I'm encountering some difficulties.
Here is the HTML and CSS code snippet I am using:
@media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.logo {
display: none;
}
header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.row ul {
display: flex;
flex-direction: column;
}
}
<header>
<div class="container">
<a href="" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="row">
<a href="index.html" class="logo"><img src="myLogo.png"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
</div>
</div>
</header>
I have managed to make the list items display in a column, but now I want to get them centered on the page. I have tried various methods like justify-content: center;, justify-items: center;, and text-align: center; but haven't been successful. Can someone provide assistance with this issue?
Thank you in advance :)