How to center text with logo in the middle of it in navbar bulma

Question

I'm trying to center text inside navbar with the logo being in between navbar items, however, I was only able to center logo as brand image.

Here's my code:

<a role="button" class="navbar-burger" aria-label="menu" data-target="navMenu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
  </a>
<nav class="navbar is-white">
  <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src='img/logo.png' style="width: 100px;">
      </a>
  <div class="navbar-menu" id="navMenu">
        <div class="navbar-start">
        <a href="#" class="navbar-item nav-text">Paslaugos</a>
        <a href="#" class="navbar-item nav-text">Kainos</a>
        <a href="#" class="navbar-item nav-text">DUK</a>
        <a href="#" class="navbar-item nav-text">Apie Mus</a>
      </div>

  </div>

</nav>

css

.navbar .navbar-brand {
  text-align: center;
  display: block;
  width: 100%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  display: inline-block;
}

Any help would be greatly appreciated I have already spent way too much time on this.

Answer 1

Considerations

Divide the container inside the navbar into three columns.

<div id="my-navbar">
  <div class="container">
    <!-- Items left -->
    <div></div>
    <!-- Logo in the center -->
    <div></div>
    <!-- Items right -->
    <div></div>
  </div>
</div>

Set flex: 1 to make each column in .container the same width.

Note

Of course, if there are more items, eg on the left side than on the right side, the items are smaller .

Example

 body { margin: 0; } #my-navbar img { display: block; } #my-navbar a { text-decoration: none; color: white; } #my-navbar { background: #151515; padding: 10px; } #my-navbar .container, #my-navbar .container>div { display: flex; } #my-navbar .container { /* Set a max width to squeeze the navbar */ max-width: 600px; margin-left: auto; margin-right: auto; } #my-navbar .container>div { flex: 1; align-items: center; justify-content: space-around; } @media screen and (max-width: 768px) { #my-navbar .container { margin: 0; } #my-navbar .container, #my-navbar .container>div { flex-direction: column; align-items: flex-start; } #my-navbar .item { margin: 5px; } #my-navbar .container>div:nth-child(1) { order: 2; } #my-navbar .container>div:nth-child(2) { order: 1; } #my-navbar .container>div:nth-child(3) { order: 3; } }

 <nav id="my-navbar"> <div class="container"> <div> <div class="item"><a href="">Link</a> </div> <div class="item"><a href="">Link</a> </div> <div class="item"><a href="">Link</a> </div> </div> <div> <div class="item"><img src="http://via.placeholder.com/100x50" alt=""> </div> </div> <div> <div class="item"><a href="">Link</a> </div> <div class="item"><a href="">Link</a> </div> <div class="item"><a href="">Link</a> </div> </div> </div> </nav>

---

Complete Bulma solution

Don't forget to set a media query so that it doesn't affect mobile screens.

@media screen and (...) {}

In this case, Bulma uses min-width: 1088px .

Hint

The .navbar-burger is inside the .navbar-brand : Bulma navbar

 document.addEventListener('DOMContentLoaded', function() { // Get all "navbar-burger" elements var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Check if there are any navbar burgers if ($navbarBurgers.length > 0) { // Add a click event on each of them $navbarBurgers.forEach(function($el) { $el.addEventListener('click', function() { // Get the target from the "data-target" attribute var target = $el.dataset.target; var $target = document.getElementById(target); // Toggle the class on both the "navbar-burger" and the "navbar-menu" $el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); } });

 @media screen and (min-width: 1088px) { #my-navbar-menu>div { flex: 1; } #my-navbar-menu>div>div { flex: 1; justify-content: center; } }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" /> <nav class="navbar"> <div class="navbar-brand"> <div class="navbar-burger burger" data-target="my-navbar-menu"> <span></span> <span></span> <span></span> </div> </div> <div id="my-navbar-menu" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"><a href="#">Site</a> </div> <div class="navbar-item"><a href="#">Site</a> </div> <div class="navbar-item"><a href="#">Site</a> </div> </div> <div class="my-navbar-center"> <div class="navbar-item"><img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> </div> </div> <div class="navbar-end"> <div class="navbar-item"><a href="#">Site</a> </div> <div class="navbar-item"><a href="#">Site</a> </div> </div> </div> </nav>

Squeeze the navbar

To keep the flex behavior for the items in the navbar menu, the easiest way would be to set display: block for the navbar and a width for the navbar menu and center it with margin: 0 auto .

 @media screen and (min-width: 1088px) { .my-navbar { display: block !important; } .my-navbar .navbar-brand { display: none; } #my-navbar-menu { width: 600px; margin: 0 auto; } #my-navbar-menu>div { flex: 1; } #my-navbar-menu>div>div { flex: 1; justify-content: center; } }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" /> <nav class="navbar my-navbar"> <div class="navbar-brand"> <div class="navbar-burger burger" data-target="my-navbar-menu"> <span></span> <span></span> <span></span> </div> </div> <div id="my-navbar-menu" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"><a href="#">Site</a> </div> <div class="navbar-item"><a href="#">Site</a> </div> <div class="navbar-item"><a href="#">Site</a> </div> </div> <div class="my-navbar-center"> <div class="navbar-item"><img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> </div> </div> <div class="navbar-end"> <div class="navbar-item"><a href="#">Site</a> </div> <div class="navbar-item"><a href="#">Site</a> </div> </div> </div> </nav>

Answer 2

If you want the simplicity of a pure CSS implementation then check Bulma layout > level out:

Answer 3

Try using the flex property. To the container div you can give

<div class="flexcontainer">


<ul>
  <li>home</li>
  <li>About</li>
  <li><img src="http://www.monodies.com/wp-content/uploads/2016/03/facebook-Icon-290x290.png"></li>
  <li>link</li>
  <li>link</li>
</ul>
</div>

.flexcontainer{
  display:flex;
}
.flexcontainer ul{
  display:flex;
  list-style:none;
  flex-flow: row wrap;
  align-items: center;

}

check this https://jsfiddle.net/karantewari/bqh9byj3/ , hope it helps :)