The Navbar's expansion is being enhanced by non-collapsible items in the Boostrap 4 dropdown menu

I recently came across a helpful snippet in this question Bootstrap 4 - Navbar items outside the collapse that allowed me to create non-collapsible items for smaller viewports. However, I encountered an issue with a dropdown menu inside one of these items - when expanded, it caused the entire Navbar to expand instead of appearing on top of it. You can see this behavior in the example linked below:

Here is the code for the Navbar:

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" id="mainNav">
    <a class="navbar-brand" href="/">
        MY Site
    </a>
    <div class="d-flex flex-row order-2 order-lg-3">
        <ul class="navbar-nav flex-row">
            <li style="width:250px;">
                <select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
                    <option value=""></option>
                    <option value="/sites/site/139/">protein</option>
                    <option value="/sites/site/138/">shake</option>
                    <option value="/sites/site/159/">soup</option>
                    <option value="/sites/site/115/">test 1</option>
                    <option value="/sites/site/116/">test 2</option>
                </select>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-user fa-lg"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-header text-center">
                        <strong>Admin</strong>
                    </div>
                    <a class="dropdown-item" href="/admin/" target='_blank'>
                        <i class="fa fa-user fa-fw"></i> Admin
                    </a>
                    <a class="dropdown-item" href="/user_info/">
                        <i class="fa fa-users fa-fw"></i> User Info
                    </a>
                    <div class="dropdown-header text-center">
                        <strong>Settings</strong>
                    </div>
                    <a class="dropdown-item" href="/app_settings/">
                        <i class="fa fa-gears fa-fw"></i> App Settings
                    </a>
                    <div class="dropdown-header text-center">
                        <strong>User</strong>
                    </div>
                    <a class="dropdown-item" href="/edit_profile/1/">
                        <i class="fa fa-user fa-fw"></i> User Profile
                    </a>
                    <a class="dropdown-item" href="/logout/?next=/login">
                        <i class="fa fa-gear fa-fw"></i> Log out
                    </a>
                </div>
            </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav" id="menu">
            <li>...</li>
        </ul>
    </div>
</nav>

Here is an image showing the issue when the viewport shrinks: https://i.sstatic.net/9VoqN.png

htmlcssbootstrap-4

Answer №1

Simply applying the position-absolute class to the dropdown-menu element will do the trick. No additional CSS is required.

<div class="dropdown-menu dropdown-menu-right position-absolute">
   ...
</div>

Check out the code here

This Bootstrap 4 GitHub issue demonstrates that dropdowns within the "mobile" Navbar should stay within the Navbar container instead of overlapping it.

For better Navbar layout, consider adding flex-row flex-nowrap classes to the navbar-nav to prevent stacking and excessive height.

Answer №2

To resolve this problem, you can counteract the responsive position: static that is applied to the dropdown-menu:

Here is the CSS code solution:

.navbar-expand-lg .navbar-nav .dropdown-menu {
  position: absolute;
}

Answer №3

To customize the default CSS of Bootstrap, you can use the following example:

@media (max-width: 991px) {
    .custom-navbar .navbar-nav .dropdown-menu {
        position: absolute;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light custom-navbar" id="mainNav">
        <a class="navbar-brand" href="/">
            MY Site
        </a>
        <div class="d-flex flex-row order-2 order-lg-3">
            <ul class="navbar-nav flex-row">
                <li style="width:250px;">
                    <select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
                        <option value=""></option>
                        <option value="/sites/site/139/">protein</option>
                        <option value="/sites/site/138/">shake</option>
                        <option value="/sites/site/159/">soup</option>
                        <option value="/sites/site/115/">test 1</option>
                        <option value="/sites/site/116/">test 2</option>
                    </select>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-user fa-lg"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <div class="dropdown-header text-center">
                            <strong>Admin</strong>
                        </div>
                        <a class="dropdown-item" href="/admin/" target='_blank'>
                            <i class="fa fa-user fa-fw"></i> Admin
                        </a>
                        <a class="dropdown-item" href="/user_info/">
                            <i class="fa fa-users fa-fw"></i> User Info
                        </a>
                        <div class="dropdown-header text-center">
                            <strong>Settings</strong>
                        </div>
                        <a class="dropdown-item" href="/app_settings/">
                            <i class="fa fa-gears fa-fw"></i> App Settings
                        </a>
                        <div class="dropdown-header text-center">
                            <strong>User</strong>
                        </div>
                        <a class="dropdown-item" href="/edit_profile/1/">
                            <i class="fa fa-user fa-fw"></i> User Profile
                        </a>
                        <a class="dropdown-item" href="/logout/?next=/login">
                            <i class="fa fa-gear fa-fw"></i> Log out
                        </a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav navbar-sidenav" id="menu">
                <li>...</li>
            </ul>
        </div>
    </nav>
</body>
</html>

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

Is there a way to adjust the image opacity of a background using Material UI?

Is there a way to adjust the opacity of a background image using Material UI? I attempted to achieve this by utilizing the makeStyles hook in Material UI. Here is an example of my code: import React from 'react'; import {Box,Typography } from &ap ...

javascriptcssreactjsmaterial-uibackground-image

Challenges encountered with relative links in the layout of a static website generator resembling padrino, sinatra, or rails, involving HTML, CSS, and haml

I'm currently utilizing a static site generator to create a website that resides on a shared network folder within my workplace. This site serves as a simple tutorial platform for my colleagues; it's not hosted on a server and remains completely ...

htmlmiddlemanstatic-siterelative-url

Guidelines for incorporating JS in Framework7

I am developing an application using the framework7. I am facing a challenge where I need to execute some javascript in my page-content, but it is not running as expected. <div class="pages"> <div class="page close-panel" data-page="item"> ...

javascripthtmlhtml-framework-7

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...

javascriptjquerycss

What impact does the use of CSS in emails have on various email clients and reading formats?

As I delve into customizing my very first (woocommerce) email template, I am considering the option of concealing data using CSS display: none. However, a few questions arise regarding the compatibility and support of CSS and display: none: Do all email ...

htmlcssemailhtml-email

IE7 encountering a mixed content error when using html5shiv and SSL

In the process of developing my ASP.Net application that utilizes html5shiv and SSL, I encountered mixed content errors in IE7 specifically when using html5shiv. Interestingly, removing html5shiv eliminated the errors. Additionally, my app incorporates upd ...

asp.nethtmlsslinternet-explorer-7html5shiv

Design that is specifically tailored for mobile devices and excludes desktop compatibility

I am faced with the challenge of designing a website that is responsive on mobile devices while not being responsive on desktop computers. To address this issue, I have implemented a series of media queries based on specific breakpoints: 320px, 321-480px, ...

css

Exploring Angular's filtering capabilities and the ngModelChange binding

Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...

htmlangulartypescript

What is the best way to customize the appearance of a table using CSS?

I'm attempting to create a table through RAILS that is automatically generated in the default layout. However, I want to customize its appearance using CSS to achieve the desired look. Specifically speaking, from the attached image, I would like the ...

htmlcssxhtmlcss-tables

Uncover the HTML tag associated with specific text on a webpage with the help of selenium

<div class="searchSummary floatL"> <span>18</span> results for "gloves" </div> Can someone assist me in using Selenium to extract the 'span' tag containing '18'? I am trying to specifically retrieve the 'sp ...

cssseleniumselenium-rc

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

javascriptjqueryhtmlcss

What is the process for incorporating a button to the left of the search field?

Is it possible to enhance the search field by adding a button to make it more user-friendly? Below is the code I have been using: <div id="search"> <div class="container"> <h1>Search U.K. house price data</h1> <form c ...

htmlcsstwitter-bootstrap

What is the method for retrieving a PHP JSON variable value and displaying it in HTML?

Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...

javascriptphphtmljsonfacebook

PHP and jQuery to create an autocomplete text input feature

I've been working on implementing an auto suggest text box using PHP and jQuery, but it seems like the jQuery code I found online is already deprecated. I'm not sure if my code is incorrect or if the issue lies with the jQuery itself. Can anyone ...

phpjqueryhtml

Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

What are the steps to submit a Textbox form?

My current setup includes a search box and a button that users click to execute the search. However, I am looking to enhance the functionality by allowing users to press "enter" instead of clicking the search button. How can I achieve this modification? B ...

phphtml

Troubleshooting CSS loading issue on iPhone 5 Safari with Responsive Design

I am trying to figure out why my website (Link) is not displaying correctly with responsive design on iPhone5 Safari Browser, even though it works fine on desktop browsers like IE, Chrome, and Safari. It also displays correctly on HTC and Samsung Galaxy de ...

htmlcssresponsive-designmobile-safariiphone-5

What is the best way to implement CSS styles from a parent component?

Within a React component using Emotion, we have a component called OtherComponent: OtherComponent: ... return <div css={otherComponentStyles}> <div className='something'> </div> </div> There is also another comp ...

cssreactjsnext.jsemotion

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...

javascripthtmlfunction