How to design full width dropdown Navbar using Bootstrap ?
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:
- 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.
- 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> - Now, make top margin of dropdown-menu as zero pixel and add width to 100%.
- 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> - 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= <script src= </script> <script src= </script> <script src= </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:green;padding:13px;"> GeeksforGeeeks </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: green;"> <a class="navbar-brand" href="#"> <img src= 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"> <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-success my-4 my-sm-2 " type="submit">Search</button> </form> </div> </nav> </center> </div> </body> </html> |
Output:
”
Approach 2:
- In Bootstrap 4, full width dropdown in Navbar might be possible by using Bootstrap 4 utilities.
- Similar to approach 1, focus on class dropdown and dropdown-menu only.
- Adding class position-static along with dropdown class, which is the parent class of dropdown-menu as follows:
<liclass="nav-item dropdown position-static"> - Now, add class w-100, mt-0 along with dropdown-menu class as follows:
<divclass="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= <script src= </script> <script src= </script> <script src= </script></head> <body> <div class="fluid-container"> <center> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </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: blue;"> <a class="navbar-brand" href="#"> <img src= 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> |
Output:
Reference: https://getbootstrap.com/docs/4.0/components/navbar/
Please Login to comment...