Jak zrobic rozwijane menu na wersje mobile z wykorzystaniem bootstrapa

Question

Witam,

chciałbym zrobić do mojego projektu rozwijane menu, które działało by tylko na wersji mobile do 800px, powyżej strona nie miała by już przycisku tzw. hamburger'a tylko normalną nawigację.

<div class="container">
    <!--logo-->
<div id="logo">
  ...
</div>

<div class="hamburger">
     <i class="fa fa-bars" aria-hidden="true"></i>
</div>

<!-- Navigation -->
<nav>
     <div class="row">

       <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

         <li class="nav-item">
              <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">O nas</a>
        </li>

        <li class="nav-item">
             <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-teamwork" role="tab" aria-controls="pills-profile" aria-selected="false">Współpraca</a>
        </li>

          <li class="nav-item">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-gallery" role="tab" aria-controls="pills-contact" aria-selected="false">Galeria</a>
          </li>

          <li class="nav-item">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Kontakt</a>
         </li>
    </ul>
  </div>
</nav>

@media screen and (max-width: 800px) {
  .fa-bars {
    font-size: 40px;
    display: block;
    float: right;
    color: #cf6518;
    padding: 5px 0 0;
    margin-right: 10px; }

  .container {
    border: 0; }
    .container nav {
      background: #2a2b2b;
      border-radius: 0; }
    .container .nav-pills {
      flex-direction: column; } }
@media (min-width: 801px) {
  .fa-bars {
    display: none; } }

.container {
  height: 100vh;
  border-left: 1px solid black;
  border-right: 1px solid black; }
  .container .tab-pane img {
    border: 1px solid black;
    width: 100%;
    height: 300px; }
  .container nav {
    border-radius: 5px;
    padding-top: 10px;
    display: flex;
    justify-content: space-around;
    background: #160fcd; }
    .container nav .nav-pills {
      list-style-type: none; }
      .container nav .nav-pills .nav-item {
        display: flex;
        justify-content: center;
        flex-direction: row; }

 

@media screen and (max-width: 800px)
{
  .fa-bars
  {
    font-size: 40px;
  display: block;
  float: right;
  color: rgb(207, 101, 24);
  padding: 5px 0 0;
  margin-right: 10px;
  }
  .container
  {
    border: 0;
    nav
{
  background:rgb(42, 43, 43);
  border-radius: 0;
}
     .nav-pills
    {
      flex-direction: column;
    }
  }
}

@media (min-width: 801px)
{
  .fa-bars
  {
     display: none;
  }
}

.hamburger
{
  height: 50px;
  background: rgba(9, 8, 8, 0.97);
}

.container
{
  height: 100vh;
  border-left: 1px solid black;
  border-right: 1px solid black;

  .tab-pane
  {
    img
    {
      border: 1px solid black;
      width: 100%;
      height: 300px;
    }
  }

  nav
  {
     border-radius: 5px;
     padding-top: 10px;
     display: flex;
     justify-content: space-around;
     background: rgb(22, 15, 205);
      .nav-pills
    {
       list-style-type: none;
     .nav-item
       {
         display: flex;
         justify-content: center;
         flex-direction: row;
       }
     }
  }

 

Answer 1

<nav id="myNav" class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
     
      <a class="navbar-brand" href="#">SOME NAV</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBarMain"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse align-items-center" class="" id="navBarMain">
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#about" class="nav-link">1</a></li>
          <li class="nav-item"><a href="#mission" class="nav-link">2</a></li>
          <li class="nav-item"><a href="#offer" class="nav-link">3</a></li>
          <li class="nav-item"><a href="#blog" class="nav-link">4</a></li>
          <li class="nav-item"><a href="#contact" class="nav-link">5</a></li>
        </ul>
      </div>
      
    </nav>

Daj znać czy sobie poradziłeś

Comments

A masz do tego jakiś css?

---

tylko bootstrap.min.css dodany

---

Powiem szczerze, że mam problem to zrozumieć ( 2-gi dzień z BS)

---

Dodaj w head :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

później wklej kod który Ci wysłałem i zobacz sobie jak to działa.

Bootstrap 4 to fajna sprawa dla stron na których pisania nie ma czasu. Jeśli mocno zależy Ci na mobilności pomyśl też o zmianie rozmiaru czcionek za pomocą @media...

Moim zdaniem to dość istotne, niestety większość tutorialio tym nie wspomina.

---

Zrobiłem tak i wyszło mi zwykła nawigacja, a mi chodziło o taką, że gdy klikam palcem na telefonie to się otwiera a normalnie jest zwinięta.

---

przy width <575px się zwija i jest hamburger. Na czym sprawdzasz?

---

Dobra faktycznie działa, pierwsze dałem width > 600px, dobra więc teraz przeanalizuje sobie twój kod, a następnie spróbuje zrobić mój hamburger. Dzięki za pomoc.