Bulma: Dropdown on right-corner of navbar can get chopped if not enough width

Created on 23 Jul 2017  路  4Comments  路  Source: jgthms/bulma

Bulma 0.4.3

screen shot 2017-07-23 at 2 02 00 pm

screen shot 2017-07-23 at 2 02 30 pm

<nav id="topnav" class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <span class="text-primary">website</span>
    </a>
    <div class="navbar-burger burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenu" class="navbar-menu">
    <div class="navbar-start">
      <a href="/" class="navbar-item">
        <i class="fa fa-home fa-2"></i>
        Home
      </a>
      <a href="/news/" class="navbar-item">
        <i class="fa fa-newspaper-o fa-2"></i>
        News
      </a>
      <a href="/ask/" class="navbar-item">
        <i class="fa fa-users fa-2"></i>
        Ask
      </a>
      <a href="/tips/" class="navbar-item">
        <i class="fa fa-magic fa-2"></i>
        Tips
      </a>
      <a href="/features/" class="navbar-item">
        <i class="fa fa-star fa-2"></i>
        Features
      </a>
      <a href="/snippets/" class="navbar-item">
        <i class="fa fa-code fa-2"></i>
        Snippets
      </a>
      <a href="/paste/" class="navbar-item">
        <i class="fa fa-clipboard fa-2"></i>
        Paste
      </a>
      <a href="/jobs/" class="navbar-item">
        <i class="fa fa-suitcase fa-2"></i>
        Jobs
      </a>
    </div>
    <div class="navbar-end">

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link waves-effect waves-light" href="/accounts/password/change/">
            <img src="https://secure.gravatar.com/avatar/fd9cbc1d41ec496776d10e4c8e3f1837.jpg?s=50&amp;d=mm&amp;r=g" class="img-fluid rounded-circle">

            tony
          </a>
          <div class="navbar-dropdown" data-style="width: 18rem">
            <a href="/profile/tony" class="navbar-item waves-effect waves-light">
              <i class="fa fa-id-card fa-2"></i>&nbsp;
              Profile
            </a>
            <a href="/accounts/password/change/" class="navbar-item waves-effect waves-light">
              <i class="fa fa-key fa-2"></i>&nbsp;
              Change password
            </a>
            <a href="/accounts/email/" class="navbar-item waves-effect waves-light">
              <i class="fa fa-envelope fa-2"></i>&nbsp;
              Change email
            </a>
            <a href="/logout/" class="navbar-item waves-effect waves-light">
              <i class="fa fa-sign-out fa-2"></i>&nbsp;
              Log out
            </a>
          </div>
        </div>

    </div>
  </div>
</nav>

(Assuming I'm not misreading the docs / made a mistake)

Perm fix could be: adding class for right-most dropdowns to popup with different coords.

Work around could be:

  • adding another top-level to the rightmost position
  • making the width of the .navbar-item.has-dropdown wider
customization
Source
picture tony

Most helpful comment

use is-right on your dropdown.

picture psyCodelist on 12 Jul 2019
👍13 ❤7 🎉2

All 4 comments

As a hack I tried two things:

  1. using a .rightmost and adjusting left: negatively
  2. and using :last-child on the .navbar-dropdown (don't think it's valid to do it on a class? but it works on chrome. probably not cross-browser)
// https://github.com/jgthms/bulma/issues/903
// Fix dropdown from getting chopped off on the right
@include desktop {
  .navbar-end .navbar-dropdown:last-child {
    left: -34px;
  }
}
tony picture tony on 23 Jul 2017

I added an extra class to my .navbar-dropdown to be .navbar-dropdown.dropdown-right and then add this to your stylesheet:
.navbar-dropdown.dropdown-right { left: calc(-100% + 4px); }

grrowley picture grrowley on 11 Feb 2018
👍6 👎1

I ended up doing this:

  .navbar-dropdown {
    min-width: 150px;

    &.dropdown-right { left: -41px; }
  }
NullVoxPopuli picture NullVoxPopuli on 20 Jun 2018
👎1

use is-right on your dropdown.

psyCodelist picture psyCodelist on 12 Jul 2019
👍13 ❤7 🎉2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Antrikshy picture Antrikshy  路  3Comments
rogervila picture rogervila  路  3Comments
dotMastaz picture dotMastaz  路  3Comments
NurdinDev picture NurdinDev  路  3Comments
Cosbgn picture Cosbgn  路  3Comments