How To Design Full Width dropdown Navbar Using Bootstrap

Posted By Bajarangi soft , Posted On 12-10-2020

In Bootstrap 4, NavBar is an essential component for menu purposes. NavBar contains so many items like text, link text, disable the link, dropdown buttons, forms, etc. To make dropdown sub-items to full-width can be carried by using either CSS properties or by using default utilities of Bootstrap 4. The following approaches will explain clearly:

Approach 1:
1.In Bootstrap 4, full width dropdown in Navbar might be possible by adding CSS properties either internally or externally based on conveniences. Focus on class dropdown and dropdown-menu only.
2.First focus dropdown which is parent class of dropdown-menu then make it as static in position as follows:

<style>
    .dropdown {
        position:static !important;
    }
</style>

3.Now, make top margin of dropdown-menu as zero pixel and add width to 100%.
4.Then add box shadow to highlight the dropdown-menu (decorative purpose) as follows:

<style>
    .dropdown-menu {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
        margin-top:0px !important;
        width:100% !important;
    }
</style>

5.We can also use CSS properties through inline method.
Example 1: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using CSS properties.

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

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
            "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
                    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
                    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
                    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .dropdown {
            position: static !important;
        }

        .dropdown-menu {
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
            margin-top: 0px !important;
            width: 100% !important;
        }
    </style>
</head>

<body>
<div class="fluid-container">
    <center>
        <h1 style="color:#e86a39;padding:13px;">
         BAJARANGI SOFT
        </h1>
        <b>Bootstrap 4 full width dropdown in Navbar</b>
        <br>
        <br>
        <nav class="navbar navbar-expand-lg navbar-dark
                  justify-content-between text-white"
             style="background-color: #db9a36;">
            <a class="navbar-brand" href="#">
                <img src=
                             "logo.jpg"
                     width="30" height="30"
                     class="d-inline-block align-top" alt="">
               BS4 Navbar
            </a>
            <button class="navbar-toggler "
                    type="button" data-toggle="collapse"
                    data-target="#navbarNavDropdown01"
                    aria-controls="navbarNavDropdown01"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    style="outline-color:#fff">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse"
                 id="navbarNavDropdown01">

                <ul class="navbar-nav ">

                    <!--dropdown item of menu-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"
                           href="#" id="navbarDropdown"
                           role="button" data-toggle="dropdown"
                           aria-haspopup="true"
                           aria-expanded="false">
                            Dropdown 01
                        </a>

                        <!--dropdown sub items of menu-->
                        <div class="dropdown-menu"
                             aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">
                                Action 01
                            </a>
                            <a class="dropdown-item" href="#">
                                Action 02
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                More Content here
                            </a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"
                           href="#" id="navbarDropdown"
                           role="button"
                           data-toggle="dropdown"
                           aria-haspopup="true"
                           aria-expanded="false">
                            Dropdown 02
                        </a>

                        <!--dropdown sub items of menu-->
                        <div class="dropdown-menu"
                             aria-labelledby="navbarDropdown"
                             style="max-width: 1366px;">
                            <a class="dropdown-item" href="#">
                                Action 01
                            </a>
                            <a class="dropdown-item" href="#">
                                Action 02
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                More Content here
                            </a>
                        </div>
                    </li>
                </ul>

                <!--Form item of menu for search purpose-->
                <form class="form-inline ml-auto ">

                    <input class="form-control mr-sm-4"
                           type="search" placeholder="Search"
                           aria-label="Search">
                    <button class="btn btn-danger my-4 my-sm-2 "
                            type="submit">Search</button>
                </form>
            </div>
        </nav>
    </center>
</div>

</body>

</html>

Approach 2:
1.In Bootstrap 4, full width dropdown in Navbar might be possible by using Bootstrap 4 utilities.
2.Similar to approach 1, focus on class dropdown and dropdown-menu only.
3.Adding class position-static along with dropdown class, which is the parent class of dropdown-menu as follows:

<li class="nav-item dropdown position-static">

4.Now, add class w-100, mt-0 along with dropdown-menu class as follows

<div class="dropdown-menu mt-0 w-100 shadow border-outline-success"
     aria-labelledby="navbarDropdown">

Example 2: Below example illustrate how to make a Bootstrap 4 full width dropdown in Navbar using Bootstrap 4 utilities.

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

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
            "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
                    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
                    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
                    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>

<body>
<div class="fluid-container">
    <center>
        <h1 style="color:#d7482f;padding:13px;">
          BAJARNGI SOFT
        </h1>
        <b>Bootstrap 4 full width dropdown in Navbar</b>
        <br>
        <br>
        <nav class="navbar navbar-expand-lg navbar-dark
                  justify-content-between text-white"
             style="background-color: #e5a06a;">
            <a class="navbar-brand" href="#">
                <img src=
                             "https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"
                     width="30" height="30"
                     class="d-inline-block align-top" alt="">
                GfG BS4 Navbar
            </a>
            <button class="navbar-toggler "
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNavDropdown01"
                    aria-controls="navbarNavDropdown01"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    style="outline-color:#fff">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse"
                 id="navbarNavDropdown01">

                <ul class="navbar-nav ">

                    <!--dropdown item of menu-->
                    <li class="nav-item dropdown position-static">
                        <a class="nav-link dropdown-toggle"
                           href="#" id="navbarDropdown"
                           role="button" data-toggle="dropdown"
                           aria-haspopup="true"
                           aria-expanded="false">
                            Dropdown 01
                        </a>

                        <!--dropdown sub items of menu-->
                        <div class="dropdown-menu mt-0 w-100
                              shadow border-outline-success"
                             aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">
                                Another action
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                Something else here
                            </a>
                        </div>
                    </li>

                </ul>

                <!--Form item of menu for search purpose-->
                <form class="form-inline ml-auto ">

                    <input class="form-control mr-sm-2"
                           type="search" placeholder="Search"
                           aria-label="Search">
                    <button class="btn btn-primary my-2 my-sm-0 "
                            type="submit">Search</button>
                </form>
            </div>
        </nav>
    </center>
</div>

</body>

</html>

Related Post

Difference Between Navs and Navbar In Bootstrap 4
How To Search For Items In A Dropdown Menu Using JavaScript
How To Change The Background Color of The Active Navbar Link
How To Align Navbar Items To Center Using Bootstrap
How To Align Navbar Items To The Right In Bootstrap 4
Creating Navbar Vanilla Html And Css Vs Bootstrap
How To Design Full Width dropdown Navbar Using Bootstrap
How To Create Transparent Navbar Using HTML And CSS
How To Create Transparent Navbar With Video Header Using CSS