A
A
Alexey Klyonin2018-09-28 20:49:34
Layout
Alexey Klyonin, 2018-09-28 20:49:34

How to make bootstrap 4 vertical collapsible menu?

How can I make a vertical collapsible menu in bootstrap 4?
Like here bootstrap-4.ru/docs/4.1/getting-started/introduction left sidebar.
I looked at the source code and couldn't figure it out.
It is necessary that the menu be vertical on desktops, and fold into a hamburger on the mobile version.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
L
lukoie, 2018-09-28
@lukoie

htmlbook.ru/css/media

A
Alexey Klyonin, 2018-09-30
@Aleks7487

I do not know how correct, but I found such a solution.

<div class="container-fluid">
      <div class="row">
        <header class="col-md-3">
          <nav class="sidebar-sticky bg-dark navbar-dark navbar-expand-md">
            <a href="#" class="logo navbar-brand">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto flex-column">
                <li class="nav-item active">
                  <a href="" class="nav-link">О нас</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Проекты</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Команда</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Отзывы</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Контакты</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
        <!-- end header -->

        <main class="col-md-9">
          <h1>Привет, это сайт!</h1>
        </main>
        <!-- end main -->
      </div>
    </div>

Perhaps this is Crutches, but it was not possible to find alternatives.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question