<nav>
<ul className = 'navbar'>
<li><b>Ecommerce</b></li>
<li>Shop</li>
<li>Stories</li>
<li>About</li>
<li className = 'search'><i className="fas fa-search"></i>Search</li>
<li className = 'cart'><i className = "fa-solid fa-cart-shopping"></i></li>
<li className = 'login' >Login</li>
</ul>
</nav>
.navbar {
display: flex;
gap: 28px;
list-style-type: none;
padding-left: 145px;
background: linear-gradient(to right, #EEEEEE, #999999);
height: 30px;
align-items: center;
}
.search {
color: #EEEEEE;
}
I want to move the cart icon and login li item to the right similar to figma navigation bar
I checked on other solutions but they are suggesting using bootstrap , thank you so much
Answer
You can use
.cart {
margin-left: auto;
}
This will make the flex container push the item as far right as possible.
body{
margin-top: 50px;
}
.navbar1{
display: flex;
gap: 28px;
list-style-type: none;
padding-left: 145px;
background: linear-gradient(to right, #EEEEEE, #999999);
height: 30px;
align-items: center;
}
.search{
color: #EEEEEE;
}
.cart{
margin-left: auto;
}<body>
<nav>
<ul class='navbar1'>
<li><b>Ecommerce</b></li>
<li>Shop</li>
<li>Stories</li>
<li>About</li>
<li class='search'>Search</li>
<li class='cart'>Cart</li>
<li class='login'>Login</li>
</ul>
</nav>
</body>