Question 306164 in CSS Question posted in
Some basic documentation can be found here.

Css – Flex wrap creates a vertical scrolling whenever bootstrap 5 dropdown is clicked

Whenever the dropdown is activated on click, there’s a vertical scroll instead of the dropdown popping out of the div like a normal dropdown would behave. I need to keep the horizontal scroll.

How can I solve this?

Demo: https://jsfiddle.net/d3jy68q7/

HTML:

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container-fluid">
      <div class="nav-scroller bg-body" id="navbarsExample03">
        <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 2</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 5</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 6</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 7</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 8</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

CSS:

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
  background-color: #212529 !important;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}
Tags:

2

Answers


  1. 0

    In your example, I see no horizontal scrolling btw.

    well you dont need your overflow property on your .nav-scroller and .nav-scroller .nav selectors :

    .nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  /* overflow-y: hidden; */
  background-color: #212529 !important;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  /* overflow-x: auto; */
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}

    Remove both of the properties as seen in the example above you will no longer have the scrolling inside the navbar

    And if you want here is a working demo

    Login or Signup to reply.
  2. 0

    The scrollbar appears because the dropdown’s parent container overflows when it opens, as its overflow-y is not hidden. However, as the parent’s parent container has overflow hidden, the dropdown menu cannot show, it’s hidden behind.

    For the dropdown menu to show/pop out, you might move it out of the containers with hidden overflow.

    It could be done with JavaScript: get the dropdown container positions, and assign it to the dropdown menu (also add fixed position, so that it can pop out of the overflow hidden containers).

    Also, as the nav items can scroll, you might also add a scroll listener, and adjust the menu.

    Try this:

    const myDropdown = document.querySelector('.dropdown');

function adjustDropdownMenu(event) {

  requestAnimationFrame(() => {

    const dropdownToggler = myDropdown.getBoundingClientRect();

    document.querySelector(".dropdown-menu").style.cssText = `
        position: fixed;
        left: ${dropdownToggler.left}px;
        top: ${dropdownToggler.height + dropdownToggler.top}px;
    `;
  });
}

myDropdown.addEventListener('show.bs.dropdown', adjustDropdownMenu);
document.querySelector('.navbar-nav').addEventListener('scroll', adjustDropdownMenu);
    <nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="nav-scroller bg-body" id="navbarsExample03">
      <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 2</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 6</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 7</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-disabled="true">Link 8</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<style>
  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
    background-color: #212529 !important;
  }
  
  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .navbar-nav .nav-link,
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link.show {
    color: #fff;
  }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search