Custom dropmenu boostrap 4

Question

I want to change the design of the dropdown-menu but I can't figure out how can i achieve this.

I would like to have the drop-down menu displayed as the same size as the container. (see screenshot below) I tried to modify the dropdown-menu class adding various property but nothing works Do you have any idea?

http://zupimages.net/up/19/26/93rj.png

My code without my modifications is simply:

https://codepen.io/BigUsername/pen/zVzRjZ

Snippet:

body {
  background-color: #a3d5d3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="container position-relative">
                
                <div class="collapse navbar-collapse justify-content-end" id="mainMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown show">
                            <a class="dropdown-toggle nav-link" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style=".dropdown-toggle: :after {
    display: block;  };
    /* display: block; */
">Menu 1<i class="fal fa-chevron-down "></i>
                            </a>
                            <div class="dropdown-menu show" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Item 1</a>
                                <a class="dropdown-item" href="#">Item 2</a>
                                <a class="dropdown-item" href="#">Item 3</a>

                                <a class="dropdown-item" href="#">Item 4</a>
                                <a class="dropdown-item" href="#">Item 5</a>
                                <a class="dropdown-item" href="#">Item 6</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meu 2<i class="fal fa-chevron-down "></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Item 1</a>
                                <a class="dropdown-item" href="#">Item 2</a>
                                <a class="dropdown-item" href="#">Item 3</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 3<i class="fal fa-chevron-down "></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 4<i class="fal fa-chevron-down"></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 5<i class="fal fa-chevron-down"></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="supervisionMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu 6<i class="fal fa-chevron-down"></i>
                                    </a>
                            <div class="dropdown-menu" aria-labelledby="supervisionMenu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

<section class="blog">
        <div class="container">
            <p>Blablabla blablabla</p>
    </div></section>

Answer 1

Currently the .dropdown is displayed with relative positioning, while the .dropdown-menu is displayed with absolute positioning with top: 100%; so that the menu is displayed right under the dropdown you click.

If you want to have a full-width dropdown menu, the first thing you need to change is the .dropdown's positioning. You might reset it so that the dropdown menu is no longer positioned absolutely from its parent, .dropdown, but from whatever next that has the relative positioning. In your case, it's the container!

Since .dropdown-menu is still displayed as absolute, you can easily make it as full width to whatever its relative parent is by setting its left: 0; and right: 0;.

I don't want to mess up with the Bootstrap default style. Hence I will introduce a new custom css class called .mega-menu and will add it to the .dropdown.

Layout

<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" />
        <div class="container position-relative">
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown show mega-menu">
                        <a class="dropdown-toggler" />
                        <div class="dropdown-menu">
                            <a class="dropdown-item" />
                            ...
                        </div>
                    </li>
                    <li class="nav-item dropdown mega-menu" />
                    <li class="nav-item dropdown" />
                    ...
                </ul>
            </div>
        </div>
    </nav>
</header>

CSS

.dropdown.mega-menu {
    position: static;
}

.dropdown.mega-menu .dropdown-menu {
    left: 0;
    right: 0;
}

Result

demo: https://jsfiddle.net/davidliang2008/pL9jc7vt/13/