How to disable Responsive (mobile) Navbar in Bootstrap 5?

Last Updated : 25 Jul, 2024

Bootstrap 5 Navbar Nav is used to make the navbar according to the requirement of the project like navbar navigation links built on .nav options with their own modifier class. Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button but in this article, we will see how to disable a responsive navbar using different approaches. The first approach is by using navbar-expand class and the second approach is by using flex-nowrap and flex-row classes.

Syntax

<nav class="navbar navbar-expand">
    ...
</nav>

Using navbar-expand Class

The navbar-toggler and navbar-collapse classes help the navbar for its responsiveness.
The navbar-expand class helps in keeping the navbar always horizontal and non-collapsing which effectively avoids the vertical stacking of the list items having nav-link classes.

Example 1: In this example the disabled responsive navbar. The use of the navbar-expand class makes sure that the navbar is always horizontal and non-collapsing.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                 initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div>
        <div class="text-center">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <h2>
                Bootstrap 5 Disabled Responsive Navbar
            </h2>
        </div>
        <br><br>
        <nav class="navbar navbar-expand">
            <div class="container-fluid text-success">
                <h4>GFG</h4>
                <button class="navbar-toggler" 
                        data-bs-toggle="collapse"
                        data-bs-target="#gfgnavbar">
                    <span class="navbar-toggler-icon">
                    </span>
                </button>
                <div class="collapse navbar-collapse ps-3"
                     id="gfgnavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" 
                               href="#">
                                Jobs
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                               href="#">
                                Practice
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                               href="#">
                                Contests
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</body>

</html>

Output:

Using flex-nowrap flex-row Class

To avoid the responsive(mobile) navbar, we have used the justify-content-evenly, flex-nowrap flex-row classes for the navbar. The flex-row class keeps the items horizontally in a row and flex-nowrap class avoids the wrapping up of items and keeps the item wraps in a single line.
flex-nowrap flex-row classes allow the navbar to remain horizontal at all widths. The flex-row class is used to set a default browser horizontal direction whereas the items will overflow but not be wrapped at all by the use of flex-nowrap class.

Example 2: This also demonstrates the disabled responsive (mobile) navbar in Bootstrap 5.