0

EDITED: Updated the code snippet

I'm using Bootstrap4 to build an app's frontend and i'm trying to achieve a navbar effect similar to the one present in AdminLTE dashboard package, where the user's name and photo are side by side in the top navbar but i can't get the items to vertically align correctly since BS4 uses relative dimensions.

AdminLTE navbar

I've tried playing around with utility classes but can't seem to figure out how to properly align the elements. Here's some of the markup:

<nav class="navbar sticky-top navbar-expand-md navbar-dark">
  <div class="navbar-collapse collapse">
    <ul class="navbar-nav mr-auto">
      <li class="user nav-item">
        <a class="nav-link" href="#">
Link 1        </a>
      </li>
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 2
        </a>
      </li>
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 3
        </a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 4
        </a>
      </li>
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 5
        </a>
      </li>
      <li class="user nav-item dropdown">
        <a class="nav-link" href="#">
          <img src="user.jpg" class="rounded-circle"> Username
        </a>
      </li>
    </ul>
  </div>
</nav>

Thanks in advance.

Gonçalo Marrafa
  • 2,013
  • 4
  • 27
  • 34
  • 1
    Please post all of the relevant code. As it is now, the image *is* vertically centered in the Navbar: https://www.codeply.com/go/blgysCaYEf – Carol Skelly Mar 12 '18 at 17:14
  • https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4 May be worth looking at, may need to also add padding on an individual basis to knock the image down. Have you tried playing with the css and various options available in dev tools with the code? Look at and inspect examples of places that have a nav bar, like even the site you're currently on. – Nard Dog Mar 12 '18 at 17:16
  • I've edited the sample code to more closely resemble real world. I have two nav elements, one on the left and one on the right and they do not align properly. – Gonçalo Marrafa Mar 12 '18 at 22:30

1 Answers1

2

you can achieve by using flex support.

.navbar-nav{
  display:flex;
  align-items:center;
}
pradeep kumar
  • 983
  • 10
  • 21