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

后端未结

关注

 3  1786

抹茶落季 2021-01-07 06:09

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:

3条回答

一整个雨季 (楼主)

2021-01-07 06:33

Considerations

Divide the container inside the navbar into three columns.

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

Note

Of course, if there are more items, e.g. 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;
  }
}

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;
  }
}

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;
  }
}

0 讨论(0)

查看其它3个回答