How to make navbar in Bootstrap always stays collapsed, no matter the screen size?

Question

How to make navbar in Bootstrap always stays collapsed, no matter the screen size?

705 Views Asked by user1600801 At 18 April 2023 at 18:50

how can I to make my navbar in bootstrap always stays/shows collapsed, no matter the screen size? I'm using bootstrap, and when my screen size is bigger, the navbar is displayed automatically, and I want no matter the screen size, the navbar shows collapsed. Thanks

Original Q&A

There are 1 best solutions below

**Bhavesh Kumar Sharma** · Answer 1 · 2023-04-19T05:59:17.907000

to keep the navbar collapsed on all screen sizes you just need to change the class=" navbar navbar-expand-lg bg-body-tertiary" to

class="navbar bg-body-tertiary"

this will keep the navbar collapsed on all screen sizes.

<!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">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.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">

    <!-- Example Code -->
    
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</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>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    
    <!-- End Example Code -->
  </body>
</html>

How to make navbar in Bootstrap always stays collapsed, no matter the screen size?

There are 1 best solutions below

Related Questions in CSS

Related Questions in NAVBAR

Related Questions in BOOTSTRAP-5

Related Questions in COLLAPSABLE

Trending Questions

Popular # Hahtags

Popular Questions