Navbar brand being stretched on bulma

问题

Using bulma there's an option to set a brand logo for the website. This brand, however, is being displayed differently across browsers. The image on discussion has the size of 640x160 and the fault is shown down below on Mozilla Firefox and Google Chrome respectively. The logo image is stretched vertically on chrome making it look ugly.

I inspected the DOM and I found that disabling a rule on .navbar-brand (display: flex) it corrects the brand size but it has other effects as in the mobile version the .navbar-burguer is located on another row (as it has a block display) and on Moz Firefox the links presented inside the navbar-menu disappear. What is causing this weird behavior over navbar-brand?

Edit

I use a static generator for the HTML pages, so you should see some liquid code for the navbar, and it is written as follows:

<nav class="navbar is-spaced has-text-weight-light" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <img class="navbar-item" src="/assets/img/logos/direc.png" width="164" height="41">

      <a role="button" class="navbar-burger" data-target="nav-menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <ul id="nav-menu" class="navbar-menu">
      {% for link in site.navigation %}
      <li><a href="{{ link.url }}" class="navbar-item">{{ link.text }}</a></li>
      {% endfor %}

      <div class="navbar-end">
        <li><a href="/login.html" class="button is-info">LOGIN</a></li>
      </div>
    </ul>
  </div>
</nav>

回答1:

The image must be surrounded by a hyperlink.

<a class="navbar-item" href="#">
   <img class="navbar-item" src="..." width="164" height="41">
</a>

The structure of the Bulma navbar is:

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

  <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">...</div>
    <div class="navbar-end">...</div>
  </div>
</nav>

In total

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">

<nav class="navbar is-spaced has-text-weight-light" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img class="navbar-item" src="http://via.placeholder.com/160/640" width="164" height="41">
      </a>

      <a role="button" class="navbar-burger" data-target="nav-menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="nav-menu" class="navbar-menu">
      <div class="navbar-start">
        <ul>
          {% for link in site.navigation %}
          <li><a href="{{ link.url }}" class="navbar-item">{{ link.text }}</a></li>
          {% endfor %}
        </ul>
      </div>

      <div class="navbar-end">
        <a class="navbar-item" href="/login.html" class="button is-info">LOGIN</a>
      </div>
    </div>
  </div>
</nav>

来源：https://stackoverflow.com/questions/52989908/navbar-brand-being-stretched-on-bulma

标签

html

css

bulma