htmlcsstwitter-bootstrapbootstrap-5

How to make Bootstrap 5.2 mega dropdown menu with full page width

I'm trying to make a Bootstrap 5.2 Mega Menu with full page-wide background, but I'm runnin into issues.

I have a basic 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">
                    <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>

That looks like this: enter image description here

Now, if I add position: static !important, like most 7-9year old post here tell you to, I get this: enter image description here

This is close, but I need the horizontal background NOT stop at the container with, but cover the whole page (colored blue in my example).

Now, I can get it to full page with by adding width: 100vw; to .dropdown-menu item, but then I get this: enter image description here It is 100% width, but it started from the trigger nav element (not start of page) and goes outside the viewpoint and I can't find a solution that would put it at the start. Or even kinda center it, so that it is covering the page nicely.

I found a few examples online, including this one and they all have the same issue as well: https://mdbootstrap.com/docs/standard/extended/mega-menu/ enter image description here They start at the element and go outside the window.

Anyone knows how to fix this and make the menu full page with starting from left side of the page?

Has something changed that creates this behaviour, as I don't recall having these probles before?

The project is based on Bootstrap and writing custom navigation would be the last thing I wish to do.

Thank you.

Solution

  • Dug a bit more and found out I can still force center it with the transform element:

    So the style addition, to Bootstrap 5.2 default, looks like this:

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

    enter image description here

    <!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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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 are problably some bootstrap classes that can also simulate this. Oh, and need to adjust border radius, paddings etc. to 0 to not go outside the page. Default behaviour has all that.