How to make navbar-item dropdown always visible and active only with hover in bulma

Question

In bulma navbar I have a logo on the left and one dropdown menu on the right. I want to make the menu always visible and only open on hover. Right now when the screen size in smaller than 1088px, the dropdown menu opens automatically on the right.

<nav class="navbar">
  <div class="container">
    <div class="navbar-brand is-expanded">
      <a class="navbar-item" href="#">
        <img src="img.png" width="131" height="35">
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          Docs
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.7.1
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 1

maybe this will help you

    .navbar-dropdown {
    	background-color: white;
    	border-bottom-left-radius: 6px;
    	border-bottom-right-radius: 6px;
    	border-top: 2px solid #dbdbdb;
    	box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
    	display: none;
    	font-size: 0.875rem;
    	left: 0;
    	min-width: 100%;
    	position: absolute;
    	top: 100%;
    	z-index: 20;
    }
    .navbar-item:hover .navbar-dropdown{
      display: block;
      }
@media screen and (max-width: 1088px){
.navbar-dropdown{
display: none;
}
}

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" media="all" />
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand is-expanded">
          <a class="navbar-item" href="#">
            <img src="img.png" width="131" height="35">
          </a>

          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
              Docs
            </a>

            <div class="navbar-dropdown">
              <a class="navbar-item">
                Overview
              </a>
              <a class="navbar-item">
                Elements
              </a>
              <a class="navbar-item">
                Components
              </a>
              <hr class="navbar-divider">
              <div class="navbar-item">
                Version 0.7.1
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>