Search code examples
cssbulma

line breaks in Bulma css navbar-item

Inside a Bulma css navbar-item I would like to have a centered icon and below this icon some text.

<nav class="navbar " role="navigation" aria-label="main navigation">
  <div class="navbar-menu navbar-end" id="navMenu">
    <a class="navbar-item">
      <p><i class="far fa-comment"></i></p>
      <p>Contact</p>
    </a>
  </div>
</nav>

Bulma puts the 2 paragraphs inside the link on the same line though, which is not default behavior for the p tag. The display: -webkit-box and display: flex properties of navbar-item seem to create this behavior, but I'm not sure what I should override them with?

Solution

  • This is because of the flexbox. Add a style on your .navbar-item, like this:

    <a class="navbar-item navbar-item-center-icon">
  <p><i class="far fa-comment"></i></p>
  <p>Contact</p>
</a>

.navbar-item-center-icon {
 flex-direction: column;
}