Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 {
        position: static !important;
    }

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

    Probably can some of those replace with Bootstrap built in class, but just leaving this here for others, who might stumble on this issue.


  2. 0

    Here’s a solution with using only BS utility classes:

    • make dropdown position static with position-static (to make dropdown menu not adjust to it)
    • make container-fluid position relative with position-relative (to make dropdown menu adjust to it, instead of dropdown container)
    • make dropdown-menu width 100% with w-100
         <div class="container-fluid position-relative">
    
              <li class="nav-item dropdown position-static">
    
                <div class="dropdown-menu w-100"

    demo:

    <!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

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

  <!-- Example Code -->

  <nav class="navbar navbar-expand">
    <div class="container-fluid position-relative">
      <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 w-100" aria-labelledby="megaMenuDropdown" style="background-color: blue;">
              <div class="container-fluid" 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>


  <!-- End Example Code -->
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search