As a newcomer to web development, I am still learning the ropes. Currently, I am facing an issue with my navbar as I try to create a flexbox menu that should pop up from a collapsible button on the left side of the screen. Unfortunately, all the attempts I've made so far have failed to make it shift correctly.
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark">
<a class "navbar-brand justify-content-start" href="#">
<img src="https://pbs.twimg.com/profile_images/91427004/brule_400x400.jpg" alt="Logo" style="width: 60px;">
</a>
<div class="d-flex w-80 ml-auto">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav navbar-right ml-auto">
<li class="nav-item active expandMenu">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item active expandMenu">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item active expandMenu">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
The CSS code is provided below:
nav {
width: 100%;
height: 70px;
font-size: 175%;
}
.expandMenu {
background: rgb(52, 58, 64);
width: 50%;
margin-top: -5px;
text-align: center;
}