'Align Navbar items

I'm having this weird glitch that doesn't align the Navbar items (Navbar preview)

I tried fixing it manually by adding margin and padding but I wasn't successful due to my lack of Bootstrap knowledge

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 20px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 10px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'store' %}"> Luffy </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Store</span></a>
    </div>
  </div>
  <div class="form-inline my-2 my-lg-0 mr-auto">
   <a href="#"class="btn btn-warning">Login</a>
   <a href="{% url 'cart' %}">
    <img  id="cart-icon" src="https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png">
    <p id="cart-total">0</p>
   </a>
  </div>
</nav>

how can I fix this?

htmlcssdjangobootstrap-4navbar


Solution 1:[1]

You have a couple of little things here that are working together to cause the positioning of your nav items to be undesirable. Firstly, your #cart-total position needs to be position: absolute so that it appears on top of the icon and not on the bottom which pushes the nav items out of line. You should also set the .navbar height so that it gives enough room to position your cart total correctly using top: and right:

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 20px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 10px;
    /*right here*/
    position: absolute;
    top: 28px;
    right: 20px;
}
/*And here*/
.navbar {
  width: 100%;
  height: 90px;
  

}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'store' %}"> Luffy </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Store</span></a>
    </div>
  </div>
  <div class="form-inline my-2 my-lg-0 mr-auto">
   <a href="#"class="btn btn-warning">Login</a>
   <a href="{% url 'cart' %}">
    <img class="logo" id="cart-icon" src="https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png">
    <p id="cart-total">0</p>
   </a>
  </div>
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Danielle Hoopes

Related Questions