My Bootstrap navbar includes a shopping cart and favorites button. However, when the screen size hits 992px, the navbar switches to a hamburger collapse menu. This causes the cart and favorites buttons to spread out awkwardly. I need assistance in displaying these buttons from the dropdown menu in a user-friendly way on tablet and mobile devices. Below is my code for the nav along with a link to the site.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html" ></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" aria-current="page" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Category
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Mens</a></li>
<li><a class="dropdown-item" href="#">Jackets</a></li>
<li><a class="dropdown-item" href="#">Outer Wear</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" aria-current="page" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Collection
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Winter</a></li>
<li><a class="dropdown-item" href="#">Spring</a></li>
<li><a class="dropdown-item" href="#">Summer</a></li>
<li><a class="dropdown-item" href="#">Fall</a></li>
</ul>
</li>
</li>
</ul>
<span class="navbar">
<i> <a type="button" class="btn fab fa-gratipay"href="favorites.html" target="_self"> <span class="favoritesCount"></span> </a></i>
<i> <a type="button" class="btn fas fa-shopping-cart Cart" href="cart.html" target="_self" ><span class="navbarCart" data-totalitems="0"></span></a></i>
</span>
</div>
</div>
</nav>
</section>
Here is the CSS
/* nav container */
.container-fluid{
border-bottom: black solid 3px ;
width: 100%;
height: 50px;
}
.container-fluid a{
margin-left: 3%;
}
/* .navbar-brand
{
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
max-height: 70px;
} */
.navbar-brand
{
position: relative;
background: url(../images/fakeLogo.png);
width: 100px;
height: 40px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar span{
padding: 0 8px;
margin-right: 3%;
}
.Cart{
width: 100px;
font-size: 40px;
color: #000;
padding: 0;
position: relative;
}
If you require additional code or information, please feel free to let me know.