Scrollable Menu with Bootstrap - Menu Expanding Its Container When It Should Not

  • Home
  • Languages
  • CSS
  • Scrollable Menu with Bootstrap - Menu Expanding Its Container When It Should Not

Scrollable Menu with Bootstrap - Menu expanding its container when it should not

Bootstrap 5 (update 2021)

The dropdown markup has changed for BS 5 as the data- attributes have changed to data-bs-. However, setting max-height still works to make the dropdown scrollable...

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

https://codeply.com/p/shJzHGE84z

Bootstrap 4 (update 2018)

The dropdown markup has changed for BS 4 as the items have their own dropdown-item class. However, setting max-height still works to make the dropdown scrollable...

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Bootstrap scrollable dropdown

Alternative horizontal menu for Bootstrap 4 using flexbox

Bootstrap 3 (original answer)

I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..

CSS:

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

HTML

       <ul class="dropdown-menu scrollable-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Action</a></li>
            ..
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
       </ul>

Working example: https://codeply.com/p/ox7JC49vmT

How to prevent page scroll and closing menu when click outside menu container

Just add the event listener to your overlay container instead of your whole document:

var mobileMenu = document.querySelector("#toggle_menu");
    function mobile_menu(e) {
        e.stopPropagation();
        var x = document.getElementById("mobile_menu");
        var y = document.getElementById("container_overlay");
        
        // For var x
        if (!x.classList.contains("show")) {
          x.classList.toggle("show");
          mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
        } else {
          x.classList.remove("show");
          mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
        }
        // For var y
        if (!y.classList.contains("on")) {
          y.classList.toggle("on");
        } else {
          y.classList.remove("on");
        }
    }
     
        // Close Menu clicking on container_overlay
        // ------- I JUST CHANGED THE FOLLOWING LINE -------
        document.getElementById("container_overlay").addEventListener("click", function (e) {
        var x = document.getElementById("mobile_menu");
        var y = document.getElementById("container_overlay");
        
        // For var x
        if (e.target.id !== "mobile_menu" && x.classList.contains("show")) {
          x.classList.toggle("show");
          mobileMenu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
        }
        // For var y
        if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
          y.classList.toggle("on");
        }
        
      }); 
/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
    cursor: not-allowed;
    pointer-events: none !important;
    border: 1px solid red;
}

.error {
color: red;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Logout Header*/
.logout_header {    
    display: flex;
    justify-content: space-between;
}

.mob {
    display: flex;
    width: 49.5%;
    justify-content: center;
    background: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
}

/*Text Link css*/
.mob_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.mob_menu.item:hover > a {
    color: #2e323a;
}

/*Icon Button Toggle Menu*/
#toggle_menu {
    display: flex;
    align-content: flex-end;
    justify-content: center;
    align-items: flex-end;
    width: 20%;
    color: #000;
    position: absolute;
    top 20px;
    right: 20px;
}

.icn_toggle, .icn_toggle::before, .icn_toggle::after {
    margin: 0;
    z-index: 1000;
    font-size: 24px;
}

/*Icon Items Menu*/
.icn_items:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
}

.icn_items {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

/* User Menu For header website */
#container_overlay {
    visibility: hidden;
    position: fixed;
    z-index: 998;
    top: 0;
    left: 0;
    width: 100%;
    background: #000000b8;
    opacity: 0;
    transition: 0.3s;
    height: 100vh;
}
      
#container_overlay.on {
    visibility: visible;
    opacity: 1;

}
      
.content_menu {
    display: block;
    width: 100%;
}

#mobile_menu {
    top: 0;
    left: -100%;
    padding: 20px;
    background-color: #fff;
    min-width: 160px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
    position: fixed;
    width: 75%;
    height: 100vh;
    transition: .3s;
}

#mobile_menu.show {
    left: 0;
}
<div onclick="mobile_menu(event)" id="toggle_menu"><i class="icn_toggle fa-solid fa-bars"></i>Menu</div>

    <div id="mobile_menu"> 
        <div class="content_menu">

            <div class="user_menu header">
              <span class="display name">Hello [display_name]</span>
              <span class="display mail">[display_email]</span>
              <span class="error">clicking here closes the menu, it shouldn't happen.
            </div>
   
            <div class="logout_header">
              <a class="mob btn-login" href="#"><span>Login</span></a>
                
              <a class="mob btn-singup" href="#"> <span>Singup</span></a>
            </div>
            
            <hr class="solid" />
            
            <div class="mob_menu item">
              <a href="#">
                <i class="icn_items fa-regular fa-user"></i>
                <span class="link_text">Dashboard</span>
              </a>
            </div>

            <div class="mob_menu item">
              <a href="#">
                <i class="icn_items fa-regular fa-basket-shopping"></i>
                <span class="link_text">I miei ordini</span>
              </a>
            </div>

            <div class="mob_menu item">
              <a href="libreria">
                <i class="icn_items fa-regular fa-cloud-arrow-down"></i>
                <span class="link_text">Downloads</span>
              </a>
            </div>

            <div class="mob_menu item">
              <a href="#">
                <i class="icn_items fa-regular fa-gear"></i>
                <span class="link_text">Impostazioni</span>
              </a>
            </div>

            <div class="mob_menu item">
              <a href="#">
                <i class="icn_items fa-regular fa-arrow-right-from-bracket"></i>
                <span class="link_text">Logout</span>
              </a>
            </div>
 
        </div>
    </div>

<div id="container_overlay"></div>

How do I extend my navbar banner below my navbar row?

I was able to solve my problem. There were a couple of things I had to do:

  1. I ended up not needing to use the row class nor the column classes.
  2. In my styles.css file, purpleLogo was labeled as a class when it was supposed to be an id.
  3. I had to give #navbarSupportedContent a left margin of 224px so the navbar links didn't overlap the banner.
  4. I had to give #purpleLogo a top position of 0px.
  5. I had to remove the .img class and assign these properties to individual ids.

#homeBanner{
    display: block;
    margin-right: 0;
    margin-left: 0;
    z-index: 1;
    width: 100%;
}
#purpleLogo{
    position: absolute;
  top: 0px;
}
#navbarSupportedContent {
    margin-left: 224px;
}
.hover:hover{
    background-color: #754775;
}
.hover a{
    text-decoration: none;
}
.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}
a.nav-link.dropdown-toggle.show {
  background-color: #78496a;
    transition: none;
}
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.dropdown-menu > li > a {
    display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
    font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container">
        <img id="purpleLogo" src="https://minerals.ogm.utah.gov/images/purpleLogo.png" />
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a>
                    <ul class="dropdown-menu scrollable-menu" role="menu">
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#staff">Staff</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">Emergencies</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#email">Email Us</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#facts">O&G Facts</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a>
                    <ul class="dropdown-menu scrollable-menu" role="menu">
                        <li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li>
                        <li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li>
                        <li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
                <li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
                <li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-logs/logs-main.xhtml">WELL LOGS</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/noticesAndUpdates.php">NOTICES</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/rules.php">RULES AND STATUTES</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/publications.php">PUBLICATIONS</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/wellSpacingBoardOrders.php">WELL SPACING</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/mapResources.php">MAP RESOURCES</a></li>
                <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a>
                    <ul class="dropdown-menu scrollable-menu" role="menu">
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a>
                    <ul class="dropdown-menu scrollable-menu" role="menu">
                        <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=National%20Energy%20Foundation)-,Government%20Agencies,-Automated%20Geographic%20Reference">Government Agencies</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Industry%20Information%20and%20Research">Industry Information and Research</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Pricing">Oil and Gas Pricing</a></li>
                        <li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Some%20of%20Utah%27s%20Top%20Oil%20and%20Gas%20Producers">Some of Utah's Top Oil and Gas Producers</a></li>
                        <li><a href="https://www.ogm.utah.gov/Board/redesign/board.html">DOGM Board Members</a></li>
                        <li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li>
                        <li><a href="http://www.utah.gov/main/index">Utah.gov</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">EMERGENCIES</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/permittingReview.php">PERMITTING</a></li>
                <li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/inspectionsReview.php">INSPECTIONS</a></li>
            </ul>
        </div>
    </div>
</nav>
<img id="homeBanner" src="https://minerals.ogm.utah.gov/images/MINERALSmainSmall.jpg"  />

bootstrap 4 making dropdown scrollable

just you can use @media in your css

@media (max-width: 500px) {
    .dropdown-menu{
        height:200px;
        overflow-y:auto;
    }
}

Bootstrap 4 nav dropdown menu overflows the window

Overwrite the bootstrap CSS:

.dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

It will work for you

Horizontal dropdown menu in Bootstrap won't scroll with navigation

So the problem is that width: 100% means different things when position is fixed and when it is absolute. When it's fixed, it fills 100% of the window. When it's absolute, it fills 100% of its closest parent with relative positioning.

In this case, li.dropdown is relatively positioned, so the dropdown fills that width. To fix that, add this line of CSS:

ul.nav li.dropdown {position: static;}

Now fix your dropdown menu CSS with this:

.dropdown-menu {
    position: absolute;
    top:50px;
}

Here is the fixed bootply: http://www.bootply.com/EuiK4NsMn5


Related Topics

Why Percentage Value Within Grid-Gap Create Overflow in CSS Grid

@Media Min-Width & Max-Width

How to Target a :Before or :After Pseudo-Element With a Sibling Combinator

Difference Between :Focus and :Active

Smallest Data Uri Image Possible For a Transparent Image

Separators For Navigation

List of CSS Vendor Prefixes

@Font-Face Eot Not Loading Over Https

Css Animation and Display None

Transition Background-Color Via Slide Animation

Css 3 Shape: "Inverse Circle" or "Cut Out Circle"

How to Transition Width of Content With Width: Auto

How to Dynamically Generate a List of Classes With Commas Separating Them

Vertical-Align Aligns Everything Else Except Self

How to Animate a Radial-Gradient Using Css

Angular 2: How to Style Host Element of the Component

What Is the Value of the CSS 'Ex' Unit

Bootstrap 3 Responsive Table with Fixed First Column


Leave a reply



Submit