Skip to content

Support for dropdown aligned to the right edge of navbar-link

Jean-Louis Jouannic requested to merge (removed):dropdown-align-right into master

Without this, dropdown entry may be partially hidden if situated at the right end of the navbar.

Easy to reproduce simply by removing the Download button from the navbar in the default UI:

<header class="header" role="banner">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="{{or site.url (or siteRootUrl siteRootPath)}}">{{site.title}}</a>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Products</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Product A</a>
            <a class="navbar-item" href="#">Product B</a>
            <a class="navbar-item" href="#">Product C</a>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Services</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Service A</a>
            <a class="navbar-item" href="#">Service B</a>
            <a class="navbar-item" href="#">Service C</a>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Resources</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Resource with a long name</a>
            <a class="navbar-item" href="#">Resource B</a>
            <a class="navbar-item" href="#">Resource C</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

Merge request reports