Creating a wide mega dropdown menu using Bootstrap 5.2 for a full-width page

I am attempting to create a Bootstrap 5.2 Mega Menu with a full page-wide background, but I am encountering some challenges.

Here is my basic navigation setup:

<nav class="navbar navbar-expand">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Item 1</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="megaMenuDropdown" style="background-color: blue;">
                        <div class="container" style="background-color: red;">
                            <div class="row">
                                <div class="col-12">
                                    COL 12 WITH INSIDE CONTAINER
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

This produces the following layout: https://i.sstatic.net/c43cLygY.png

When I add position: static !important, as suggested in several older posts, I get the following result: https://i.sstatic.net/gYweEu2I.png

While this is close, I need the horizontal background to extend beyond the container and cover the entire page (illustrated in blue in my example).

To achieve a full-page width, I added width: 100vw; to the .dropdown-menu item, but it resulted in the following layout: https://i.sstatic.net/kZh7zp5b.png The menu is now 100% width starting from the trigger nav element, extending beyond the viewport. I am struggling to find a solution that positions it at the start of the page or centers it nicely to cover the entire page.

I have come across similar examples online, such as this one, where the issue persists: https://i.sstatic.net/pb0eUkfg.png These menus also start from the element and extend outside the window.

Can anyone provide a solution to make the menu extend full page starting from the left side of the page?

I am wondering if there have been any recent changes causing this behavior, as I have not encountered similar issues before?

The project relies on Bootstrap, and I would prefer not to resort to creating a custom navigation menu.

Thank you.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Check out this approach that utilizes only Bootstrap utility classes:

  • Set the dropdown position to static using position-static
  • Make the dropdown-menu span the entire screen and center it using 
    vw-100 start-50 translate-middle-x
   
         <li class="nav-item dropdown position-static">
    
           <div class="dropdown-menu vw-100 start-50 translate-middle-x"

See a demo below:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafafb8ba1a7a7b7beefa5b8a4b8b9faa7aba9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5422151d0505150503021b04080f510c0002">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

  
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">

<div class="container">
    <div class="row">
        <div class="col-12">

            <!---  START: navigation  --->
            <nav class="navbar navbar-expand">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Item 1</a>
                            </li>
                            <li class="nav-item dropdown position-static">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                   aria-expanded="false">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu vw-100 start-50 translate-middle-x" aria-labelledby="megaMenuDropdown"
                                     style="background-color: blue;">
                                    <div class="container" style="background-color: red;">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-lg-2 col-md-6">Column 1</div>
                                            <div class="col-lg-2 col-md-6">Column 2</div>
                                            <div class="col-lg-2 col-md-6">Column 3</div>
                                            <div class="col-lg-2 col-md-6">Column 4</div>
                                            <div class="col-lg-2 col-md-6">Column 5</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Item 3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!---   END: navigation   --->

        </div>
    </div>
</div>
</body>
</html>

Answer №2

After further investigation, I discovered a method to center it using the transform element:

To customize the style in addition to the default Bootstrap 5.2 settings, you can use the following code:

<style>
    .dropdown-menu {
        width: 100vw;
        left: 50%;
        transform: translate(-50%, 0);
    }
</style>

https://i.sstatic.net/TMmmuf2J.png

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dac6db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf6eaf7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        .navbar-nav .dropdown-menu {
            width: 100vw;
            left: 50%;
            transform: translate(-50%, -1px);
        }
    </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">

<div class="container">
    <div class="row">
        <div class="col-12">

            <!---  START: navigation  --->
            <nav class="navbar navbar-expand">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Item 1</a>
                            </li>
                            <li class="nav-item dropdown position-static">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                   aria-expanded="false">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu" aria-labelledby="megaMenuDropdown"
                                     style="background-color: blue;">
                                    <div class="container" style="background-color: red;">
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-lg-2 col-md-6">Column 1</div>
                                            <div class="col-lg-2 col-md-6">Column 2</div>
                                            <div class="col-lg-2 col-md-6">Column 3</div>
                                            <div class="col-lg-2 col-md-6">Column 4</div>
                                            <div class="col-lg-2 col-md-6">Column 5</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Item 3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!---   END: navigation   --->

        </div>
    </div>
</div>
</body>
</html>

PS: There may be bootstrap classes that could achieve the same effect. Additionally, adjustments to border radius, padding, etc. to 0 may be necessary to avoid going beyond the page. The default behavior covers all of those aspects.

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

When I update URLs in Django, my CSS breaks down

Recently, I encountered an issue on my website and found a solution by creating two separate HTML pages. However, when I modified the urls.py to differentiate the URLs for these pages, the CSS stopped working. Below is my code snippet and a detailed explan ...

pythoncssdjangourl

Transfer various field values to jQuery

I am looking to send multiple field values to jQuery for validation, but currently only receiving the value of the changed field. How can I pass both field values to jQuery? Enter some text: <input type="text" name="txt1" value="Hello" onchange="myF ...

javascriptjqueryhtml

Using Media Queries to Optimize Image Display for Higher Pixel Densities: @2x, @3x,

My current project involves supporting various pixel ratios on the website I am developing. I want to make sure that I include all necessary browser prefixes to ensure compatibility with a wide range of devices and browsers. While I am using SVGs whenever ...

imagecssmedia-queriesretina-display

Neatly incorporating a checkbox into a miniaturized image

I need help with the code snippet below, where I want each thumbnail image to have a checkbox overlay. I want the images to take up all the space in the table cell without any white space above. It is essential that the "left" and "right" divs are aligned ...

htmlcss

"How to automatically populate an input field with a value when the page loads in an

I need assistance with setting the input value to 1 when the page is loaded, but for some reason, it remains empty. Can someone help me troubleshoot this issue? <tr *ngFor="let item of cartItems; let i=index"> <td class="cart_pr ...

javascripthtmlangular

implement an angular directive to apply a CSS element

I am utilizing AngularJS and ng-repeat to populate a dynamic list of studies. This list has the capability to toggle into child elements of each item, creating an accordion-style toggle list that can go up to three levels deep for each list item. I am curr ...

javascriptjqueryhtmlcssangularjs

Can a Bootstrap 5 modal popup be shown in Angular by utilizing an ngIf statement?

The issue we are facing here is related to the conditional display of a modal using ngIf. The problem arises because initially, when the page loads, the modal element is not present in the DOM as it is set to false by default. Therefore, on the first click ...

angularbootstrap-modalbootstrap-5angular-ng-if

I am having difficulty with the fadeIn animation not working as expected in my situation

http://jsfiddle.net/9w0v62fa/1/ Instead of using opacity 0 and 1 in two different places, which I find redundant, I attempted to utilize the CSS animate property. However, I couldn't get it to work. Here is my code: .btn{ background:blue; pa ...

javascriptjqueryhtmlcss

What is the best way to extract text that falls between two specific patterns using the preg_match_all function in PHP

I've been struggling to locate two specific HTML tags and extract the content in between them. When I search for each tag individually, they are found successfully, so I am confident that they are spelled correctly and do exist. However, I believe the ...

phphtmlregexpreg-match-all

Angular Square Grid Design

Attempting to create a square grid layout using CSS for ng-repeat items. Essentially, I am looking to have one big square followed by four smaller squares that combined have the same width and height as the big square. Here is my CSS: .container{ widt ...

javascripthtmlcssangularjs

Accessing variables from child controllers with populated select inputs in Angular

I'm currently facing an issue involving 3 controllers: Parent Controller: DocumentController Child Controller1: XdataController Child Controller2: CompanyController The child controllers are used to populate data in three Selector inputs on the fron ...

javascripthtmlangularjsnode.js

Tips for aligning content produced by *ngFor within a bootstrap grid

I am trying to center content in a row using the Bootstrap grid system. While I have checked out various examples, such as this one, my case is unique because I am utilizing a separate angular component for generating the content. Here is the code snippet ...

cssangularbootstrap-grid

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

While experimenting with the boilerplate template, I encountered an unusual issue when attempting to use TypeScript with the default NextJS configuration. The problem arose when changing the file extension from .js to .tsx / .tsx. Various versions of NextJ ...

csstypescriptnext.js

Issues with font face rendering on Android Chrome and Firefox devices

I'm currently encountering an issue with the font face in CSS3. The code I have been using is as follows: @font-face { font-family: James Fajardo; src: url('https://www.twoseven.nl/kurkorganicwines/wp- content/themes/kurk/fonts/James_Fajardo.t ...

androidhtmlcssgoogle-chromemobile

Is the AngularJS email validation triggering too soon?

My challenge involves validating an email field in angularjs using the following code: <input type="email" ng-model="email" class="form-control" name="email" ng-required="true" placeholder="Email Address"> <span ng-show="loginForm.email.$touched ...

htmlangularjsangularjs-ng-modelangularjs-validation

How can elements be displayed differently depending on the return value of a function?

Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...

htmlangular

Prevent the footer from overlapping with the text when printing several pages

Is there a way to prevent text from overlapping the footer when printing a page containing both? I have tried using CSS and HTML to adjust the positioning of the footer, but it still overlaps with long blocks of text. Any suggestions on how to fix this i ...

htmlcssbootstrap-5

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

javascriptcssangularsassangular-cli

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

htmlcsscss-selectorsgoogle-tag-manager

The backdrop takes precedence over all other elements

The issue I'm facing is that the other Div is not appearing above the background. My goal is to have the background fill the entire screen. <title>The Ultimate Cube World Resource!</title> <link href="style.css" rel="stylesheet" type=" ...

htmlcss