Bootstrap Navbar elements not aligned properly

Question

This is one of the minor CSS problems that plagues me constantly! I'm trying to align navigation elements in my navbar, which contain some images and text, I tried this part of code but it's not working properly :

html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"
  integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#"><img src="../../../assets/images/logo-svg-2.svg" class="logo-soirees" alt=""></a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <div class="basket-container menu ">
        <div class="menu-icon"></div>
        <div class="menu-icon"></div>
        <li class="nav-item ">
          <a class="nav-link menu-link">
            MENU
          </a>
        </li>
      </div>

      <div>
        <li class="nav-item user-profile ">
          <a class="nav-link">
            <img src="../../../assets/images/User.svg" alt="">
          </a>
        </li>
      </div>
      <div class="basket-container">
        <li class="nav-item ">
          <a class="nav-link">
            <img class="basket" src="../../../assets/images/login.svg" alt="">
          </a>
        </li>
      </div>
    </ul>
  </div>
</nav>

sass

nav
  background-image: url("../../../assets/images/Header-Background.png")
  height: 165px
  background-position: center
  background-repeat: no-repeat
  background-size: cover

.navbar
  padding-right: 40px

.basket-container
  width: 40px
  height: 40px

.basket
  right: 0%
  top: 6%
  position: absolute

.user-profile
  margin-right: 70px
  width: 15px
  height: 18px

.logo-soirees
  padding-left: 40px

.menu
  margin-right: 52px
  margin-top: 6px
.menu-link
  color: #fff !important
  font-size: 14px
  font-weight: 500
  line-height: 1.14
  letter-spacing: 1px
  text-align: right

.menu-icon
  width: 22px
  height: 2px
  background-color: #fff
  margin: 6px 

I get this result :

but I expect to get this :

is there a way best than what I did ! How can this be fixed?

Thanks!

Answer 1

<a href="#" class="nav-link nav-link--menu">
      MENU

    <div class="menu-icon-wrapper">
        <div class="menu-icon"></div>
        <div class="menu-icon"></div>
    </div>
</a>

.nav-link--menu {

     // add these to align your menu link correctly:
     display: flex;
     align-items: center;
}

1. Wrap your .menu-icons in a wrapper
2. Move icon below the link text ('MENU')
3. Add display:flex and align-items:center to your css for .nav-link (or in this case .nav-link--menu)

See here: https://codepen.io/anon/pen/YmZLbm