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 causing the divs to remain stationary instead of floating away with BootStrap?

My divs aren't aligning properly as expected when using the BootStrap Grid System. For example, if I have 4 columns and then another 2 columns, the second div should take up the next 4 columns but instead it's appearing below in the same column r ...

htmlcsstwitter-bootstrap

Issue with CSS background images not resizing properly on iPad and iPhone devices

While my site's background image resizes nicely in Chrome and Safari using background-size: cover, I encountered an issue when testing it on an iPad or iPhone. The CSS background image appears to be extremely zoomed in, resulting in a horrible appeara ...

htmlioscss

Confusion between Codeigniter's URL and base_url() function

$config['base_url'] = 'localhost/project'; <link href="<?= base_url(); ?>/css/bootstrap.min.css" rel="stylesheet"> An issue arises with the CSS not loading on the view due to a double '/' in the URL. This occur ...

phphtmlcsscodeigniter

Hovering over an element and eliminating any extra space

Hey there, I'm looking for some assistance with removing the whitespace on hover. Below is the code along with a screenshot for reference: div.show_sizes_onhover { background: rgba(255,255,255,.9); bottom: -1px; color: #a1a1a1; left: 0; padding: 5px ...

htmlcsswebshop

placing a vertical bootstrap button along the left border

My goal is to place a vertical bootstrap button on the left side of the screen. Currently, I have implemented the following CSS: #button1 { position: absolute !important; z-index: 10 !important; left: 0px !important; bottom: 20% !important; tr ...

htmltwitter-bootstrapcssbootstrap-4

What's the best way to align grid items that are positioned next to each other in CSS Grid?

I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got ...

htmlcsscss-grid

Ensure that the heading cells in the table header (thead) are properly

Struggling with aligning the thead with the td in the tbody? I attempted adjusting the thead using display: table-header-group;, but discovered that padding doesn't work on 'table-header-group'. This led me to try adding padding-left to my t ...

htmlcssangularjs

Challenges with Implementing Background Images on my Website with HTML and CSS

Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I ...

htmlcss

Including a hyperlink button within a Kendo Grid cell that is editable

I have a grid featuring a column for editable phone numbers. I want to include a small icon that users can click on to trigger a "tel: link" which will prompt their phone hardware to act accordingly. For a demo, check out this link -> Objective: Clic ...

cssgridkendo-grid

Personalizing Web Push Alerts (Google Chrome)

I successfully implemented a web push notification for Google Chrome using Google Project and Service Worker. One thing I'm curious about is how to customize or style the push notification. The plain message box doesn't quite cut it for me – I ...

javascripthtmlcssgoogle-chromepush-notification

Choosing a color while hovering over the navigation bar

I'm trying to modify the color of my navigation bar when hovering over it with the mouse. Currently, it's black but I want it to change to a light grey or white color. What am I missing here? HTML: <!DOCTYPE html> <html> <head ...

htmlcsstwitter-bootstrapcolors

Collecting information from form submissions, accessing data from the database, and displaying the results

I am currently working on a project using nodejs, express, and mongodb within the cloud9 IDE. My goal is to create a page with a form that allows users to input data, search for corresponding information in the database, and display that data on the same ...

javascripthtmlcssnode.jsexpress

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

I have been trying to incorporate a feature on my Shopify frontage website where our logo appears fullscreen and then fades away or disappears after a few seconds, allowing people to access the rest of the website. However, I am facing difficulty in making ...

javascripthtmlcssanimationshopify

How can I properly save a PNG image with alpha transparency to be compatible with IE6?

Seeking advice on saving a visually pleasing 1 or 8-bit PNG image that renders well in IE6. Open to suggestions on alternative methods as I have experience with Fireworks but exploring new options. Thank you in advance! ...

cssimageinternet-explorer-6pngalpha-transparency

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

htmlcss

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

htmlcsstemplatesdrop-down-menusubmenu

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

I'm struggling to insert my contact form code into the contact tab without it interfering with the tab bar. I want the form to appear in the middle of the page when the tab is clicked. I've tried various placements for the code but none seem to ...

htmlcss

Is it possible to utilize CSS to generate a full-width slider while maintaining the aspect ratio of the content?

I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below: The background ...

jquerycssunslider

What is causing my HTML wrapper to malfunction?

Below is the HTML code for my website: <div id="wrapper"> <div id="header"> <img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> </div> <!--- End Header ---> <div id="navbar"> <ul ...

htmlcsstagswrapper