Fixing a Bootstrap 4 dropdown problem within a fixed-top navbar

After spending a whole day troubleshooting, I am still puzzled as to why the dropdown within the navbar fails to function properly when the viewport changes.

If you take a look at the sample on your phone (or via developer tools) and switch the orientation to landscape, you will notice that the links in the dropdown become inaccessible.

I attempted to enable scrolling for .dropdown using overflow: scroll!important without any luck. I also experimented with positioning it at the top with position fixed but to no avail.

My ultimate goal is for the menu to expand beyond the view so that users can scroll either the screen or even the dropdown itself to access the remaining links.

It's worth noting that removing the class "fixed-top" from the nav resolves the issue, leading me to believe there might be an inherent conflict with that specific class.

Here is the code snippet:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body style="padding-top: 70px;">
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>          
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>          
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <main>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
        </main>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>
cssbootstrap-4

Answer №1

var fixed = document.getElementById('fixed');

fixed.addEventListener('touchmove', function(e) {

  e.preventDefault();

}, false);
.dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
}

@media (max-width: 990px) {
  .navbar.fixed-top {
    overflow-y: auto;
    max-height: 100vh;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav id="#fixed" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<main>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
</main>

Define the maximum height of the navbar styling using CSS:

@media (max-width: 990px){
  .navbar.fixed-top{
    overflow-y: auto;
    max-height: 100vh;
  }   
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

As the week progresses, the cells corresponding to each weekday will automatically highlight, from Monday through Sunday. If today is Tuesday, the Tuesday cell will be highlighted accordingly. Please refer

Take a look at the image provided in the link below. I need the library hours to be automatically highlighted each day. https://i.sstatic.net/LvqhR.png ...

htmlcss

Is there a way to align my text to the right of an image?

My current code is displaying an image https://i.sstatic.net/Nmnr6.jpg I want it to show a different image instead: https://i.sstatic.net/MH7sR.jpg This is the HTML code I'm using: </div> <div class= "Row1"> <h2>Looking ...

htmlcss

Troubleshooting Bootstrap 4: data-keyboard attribute malfunctioning

I am using a Bootstrap 4 carousel and have set the attribute data-keyboard="true" Unfortunately, the keyboard navigation feature is not working even when I focus on the carousel with the mouse first. I want the carousel to be interactive with t ...

javascriptbootstrap-4carousel

What is the best way to eliminate the excess space below my personalized badge design?

How do I eliminate the space below the badge component without using padding or margins? I suspect it may be related to line-height, but I want the badge height to perfectly match its content. Any suggestions on how to achieve this? https://i.sstatic.net/ ...

csstailwind-css

Find the elements of <a> tags specifically without the attribute href

Currently, I am extracting the class of all <a> elements in an HTML document of a webpage using VB.net from a WinForm: Dim htmlLinks As HtmlElementCollection = WebBrowser1.Document.GetElementsByTagName("a") For Each link As HtmlElement In htmlLi ...

javascriptjqueryhtmlcssvb.net

Is there a way to design a mosaic-style image gallery featuring images of varying sizes in a random and dynamic layout, all without relying

In my quest to create a unique mosaic-style image gallery, I have scoured the internet for suggestions and have come across numerous recommendations for using available plugins. However, I am curious if there is a way for me to personally create a mosaic ...

javascriptphpjquerycssajax

Struggling with the challenges of utilizing @media only screen to conceal a div in mobile view

I need to toggle the visibility of the "tiled-map" div when viewing on mobile devices, while ensuring that all 3 divs (base-map, overlay-map, tiled-map) within the "map-wrapper" div are displayed on desktop view. Currently, I am using Bootstrap CSS withou ...

javascripthtmlcsstwitter-bootstrap-3leaflet

Upon selecting the hamburger menu, the menu pops up; however, the homepage text is visible overlapping the menu

I'm in the process of developing a responsive portfolio page using ReactJS and Tailwind CSS. When the screen size is smaller than the medium breakpoint, a hamburger menu icon appears. However, when I click on the hamburger icon to view the menu items, ...

cssreactjstailwind-css

Text color-coded for specific hues

I am looking to change the color of a specific text within HTML/PHP/CSS/JS code. Here is an example of the text structure: @john please move the invite to the next week. My goal is to make the word "@john" appear in green, while keeping the rest of the ...

javascriptphphtmlcss

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

javascripthtmlcssjquery-mobile

What is the best approach for organizing a CSS grids template?

I am trying to utilize CSS grids to arrange the layout of this page as shown below: https://i.sstatic.net/x7epq.png While there are currently only 3 divs, I want to begin by figuring out how to position div 2 and div 3 on the second row in columns 2 and ...

javascriptcssreactjsflexboxcss-grid

Having trouble with loading background images in Angular 4?

After researching extensively on stack overflow, I am still struggling to resolve this issue. The main problem I am facing is related to adding a background image to the header tag in my code. Unfortunately, no matter what I try, the background image refu ...

htmlcssangulartypescriptbackground-image

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

While working on a liquid layout, I have set all my width and height values in percentages. However, during the design process, I needed to check how my CSS was rendering so I temporarily set the height in pixels. Eventually, the height in percentage wil ...

css-floatcss

Utilizing React-Bootstrap in a Gatsby static site ensures that columns automatically wrap for a seamless and responsive

Despite setting xs columns to add up to 12, the columns in a row still wrap. This issue occurs across all screen sizes. I have already reviewed the following resources but they did not provide a solution: Stack Overflow Question: Bootstrap xs columns wrap ...

reactjsbootstrap-4gatsbyreact-bootstrap

Low-quality CSS Gradient Design

Hey everyone, Feel free to take a look at my preloader on this link: (Hit ESC as soon as the page loads to pause the website and focus on the loader) Upon closer inspection, you'll notice that there is an issue with the quality of the background l ...

htmlcsslinear-gradients

Google's Inspector reveals varying widths on display

Currently, I am working on a web page and have noticed some discrepancies in the window widths when viewing the page using Google Inspector. The issue seems to occur when comparing the page hosted on Github pages with the one hosted on a local server. You ...

htmlcss

The hamburger icon seems to be frozen and unresponsive

I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary. Check out my code on JSFiddle! <html> <head> ...

javascripthtmlcss

Strategies for limiting a table row in JavaScript or jQuery without utilizing the style tag or class attribute for that specific row

I am looking for a way to limit the display of records in a table. Currently, I can restrict the table rows using the style property, but this causes UI issues such as missing mouse-over effects for the entire row. I need to ensure that mouse-over functi ...

javascriptjqueryhtmlcss

Stop the container from growing in height due to column expansion

I'm facing an issue with my Vuetify two-column layout. The left column contains media with varying aspect ratios, while the right column houses a playlist. As the playlist grows in length, it extends the container, leaving empty space below the media. ...

cssvue.jsflexboxvuetify.js