Как сделать бургер на стандартный пример из Bootsrap 5?

Question

Всем здравствуйте. Подскажите пожалуйста, можно ли как то сделать сворачивающееся меню в "бургер" на мобильную версию для примера шаблона Bootsrap 5 (ссылка). Пробовал сделать по документации, ничего не выходит, либо пропадает меню вообще, либо работает всегда только бургер и на десктопе и на мобилке, и то открывает и не закрывает... Стандартные примеры работают, но они другого формата, я хочу чтобы меню оставалось как в этом примере, а на мобильной версии скрывалось в бургер между 2мя линиями под "брендом"... Помогите, кто знает как сделать пожалуйста.

Пробовал сделать по документации через классы "collapse" не получилось, работает не корректно, добавлял список <a> в список <ul> тоже не помогло...

Answer 1

.center {
  display: block;
  margin: auto;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>World</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row border-bottom py-3">
      <div class="col-4">
        <nav class="navbar">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">Subscribe</a>
          </div>
        </nav>
      </div>
      <div class="col-4">
        <nav class="navbar">
          <div class="container-fluid">
            <a class="navbar-brand h1 fs-1" href="#">Large</a>
          </div>
        </nav>
      </div>
      <div class="col-4">
        <nav class="navbar">
          <div class="container-fluid">
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" aria-label="Поиск">
              <button class="btn btn-outline-success" type="submit">Поиск</button>
            </form>
          </div>
        </nav>
      </div>
    </div>
    <div class="row border-bottom py-1 mb-3">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <button class="navbar-toggler center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#">Menu</a>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">World</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">U.S.</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Technology</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Design</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Culture</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Business</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Politics</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Opinion</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Science</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Health</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Style</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Travel</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

Если я правильно поняла Вашу задумку, то это можно реализовать вот так

БЛОГ НА HUSL

Как сделать бургер на стандартный пример из Bootsrap 5?

Ответы (1 шт):