The problem with the Bootstrap Navbar Dropdown is that it opens up within the confines of

I have created a navigation bar using Bootstrap 4 and included the .navbar-bottom class to enable scrollbar functionality when there are more menu items than the total width of the page.

However, an issue has arisen where the Bootstrap 4 navbar dropdown opens within the navbar itself. You can see this problem in the GIF screenshot below:

Screenshot GIF View Here

.navbar-bottom class for scrollbar in navbar

.navbar-bottom {
    overflow-x: auto;
    white-space: nowrap;
}

HTML

<nav class="navbar navbar-expand navbar-light navbar-bottom">
    <ul class="navbar-nav mr-auto pl-2">
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        <li class="nav-item">
            <div class="dropdown">
                <a class="nav-link" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Dropdown1</a>
                    <a href="#" class="dropdown-item">Dropdown2</a>
                    <a href="#" class="dropdown-item">Dropdown3</a>
                    <a href="#" class="dropdown-item">Dropdown4</a>
                </div>
            </div>
        </li>
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
    </ul>
</nav>
cssbootstrap-4

Answer №1

Give this a try

This should resolve your issue

Your main concern seems to be that you are using the dropdown class within a different div instead of the li element. Hopefully, this helps solve your problem.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<nav class="navbar navbar-expand navbar-light navbar-bottom">
        <ul class="navbar-nav mr-auto pl-2">
            <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</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>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
            <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        </ul>
    </nav>

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

What is the proper way to encode image URLs for use in CSS?

For the div element in my code, I want to allow users to input a URL that will be applied as a CSS background image, like this: background-image: url("/* user specified URL here*/") I'm concerned about security. How can I properly escape the URL to ...

cssurlescapingxss

The absolute CSS dropdown isn't visible, but the relative one is displaying properly

Currently, I am in the process of creating a CSS dropdown menu. The main dropdown (the first ul) has a position set to relative, while the second dropdown has its position as absolute. However, using absolute causes this issue: On the other hand, settin ...

htmlcss

Shifting and implementing various styles across numerous elements at the same time

There is an anchor tag containing two spans... <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> When hovering over the anchor tag, I want to c ...

css

What is the proper method for utilizing colspan within the footerData of a jqGrid?

Are you looking to customize the footer of your jqgrid as shown in the example below? I am trying to set up a custom footer for my jqgrid similar to the one displayed above. I have already enabled the footerrow:true option and used $self.jqGrid("footerDat ...

javascripthtmlcssjqgrid

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

javascriptjqueryhtmlcss

Position the paper-icon-button so that it is aligned to the top-right corner of the scaffold

Looking for a way to... <core-scaffold id="core_scaffold"> <core-header-panel mode="seamed" id="core_header_panel" navigation flex> <core-toolbar id="core_toolbar"></core-toolbar> <core-menu valueattr="label" ...

htmlcsspolymer

There is a lag in the loading of css stylesheets

We created a single-page company website that utilizes three different stylesheets connected to the index.html. By clicking a button, users can switch between these stylesheets resulting in changes to colors, images, and text colors. However, Issue 1: The ...

javascripthtmlcssdelayvisual-glitch

Flickering in CSS transitions on Microsoft Edge

There seems to be a peculiar issue with CSS transitions in Microsoft Edge. The problem arises when there is a transition, such as between hover states, but the styles specified for those states are overridden by other styles in the CSS hierarchy. In such ...

csscss-transitionsmicrosoft-edge

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

htmlcss

Troubleshooting a background image problem in a TailwindCSS configuration file

I'm having trouble getting the background image to show up correctly using tailwind.Config.Js. Even though Tailwind.Config.Js is generating the background image perfectly, when I view it in the browser, it's displaying a 404 error for the image. ...

cssfilepathtailwind-css

The functionality of jQuery's .hide method is not effective in this specific scenario

HTML section <div class="navigation-bar"></div> Jquery & JavaScript section function hideUserDiv(){ $('.ask-user').hide(); } var ask = '<div id="ask-user" style="block;position:absolute;height:auto;bottom:0;top ...

javascriptjqueryhtmlcss

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

htmlcss

Experiencing issues with overflowing columns in JQuery Datatables

I am currently facing an issue with my datatable where I need it to have a specific width while also displaying all its columns. The problem I am encountering can be summarized as follows: I came across solutions like Datatables Width Overflow For A ...

javascriptjquerycssdatatables

Mastering the art of gracefully transitioning to a fallback option when CSS grid

When it comes to creating a simple grid of squares (3x3 at most, filling in top to bottom left to right), I have encountered challenges with both flexbox and grid. The DOM structure required for each method seems incompatible or too complex to support both ...

htmlcssflexboxcss-grid

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

htmlcssslideshowscaling

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...

javascripthtmlcssreactjsmaterial-ui

Tips for refreshing the appearance of a window in angular when it is resized

I have a chat feature integrated into my application. I am looking to dynamically resize an image within the chat window when the width of the window falls below a certain threshold. Is there a method available to modify the CSS style or class based on the ...

cssangulartypescript

What are some ways to enhance the opacity of a Material UI backdrop?

I'm looking to enhance the darkness of the material UI backdrop as its default appearance is not very dark. My goal is to make it dimmer and closer to black in color. ...

javascriptcssreactjsmaterial-ui

How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

htmlcsscss-positionabsolute