0

Help! I can't figure out how to align the icon with the text in the navbar without it pushing the rest of the text in the div down. 

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Hungus Bungus <i class="material-icons">polymer</i></a>
    </div> <!-- other divs are closed below -->

enter image description here

CodePen here: https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100

Hungus Bungus
  • 57
  • 5

1 Answers1

0

You can use flex on .navbar-brand as follows:

.navbar-brand {
  display: flex;
  align-items: center;  
}
mrchaarlie
  • 374
  • 2
  • 11
  • YES! Ahh, thank you so much. I had a similar issue on my previous site for the class and used some janky poor coding to hide it. – Hungus Bungus Apr 13 '18 at 20:20