Zmień punkt przerwania zwijania paska startowego bez używania MNIEJ

205

Obecnie, gdy szerokość przeglądarki spada poniżej 768 pikseli, pasek nawigacyjny przechodzi w tryb zwinięty. Chcę zmienić tę szerokość na 1000px, więc gdy przeglądarka jest poniżej 1000px, pasek nawigacyjny przechodzi w tryb zwinięty. Chcę to zrobić bez użycia MNIEJ, używam rysika nie MNIEJ.

Mój problem jest taki sam, jak w tym pytaniu: Bootstrap 3 Zwiń pasek nawigacyjny

Ale wszystkie odpowiedzi w tych pytaniach wyjaśniają, jak to zrobić, zmieniając zmienną LESS. Nie miałem do czynienia z MNIEJ, używam rysika, więc chcę wiedzieć, jak można to zrobić za pomocą rysika lub innej metody.

Dzięki!

Nearpoint
źródło

Odpowiedzi:

50

Musisz napisać w tym celu określone zapytanie medialne , z twojego pytania, poniżej 768px, pasek nawigacyjny zwinie się, więc zastosuj go powyżej 768px i poniżej 1000px, tak po prostu:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

To ukryje zwinięcie paska nawigacyjnego, aż do domyślnego wystąpienia jednostki ładującej. Gdy klasa zwinięcia odwróci, wewnętrzne zasoby wewnątrz zwinięcia paska nawigacyjnego zostaną automatycznie ukryte, podobnie jak musisz ustawić css zgodnie z oczekiwaniami.

SaurabhLP
źródło
Obecnie pasek nawigacyjny zwija się, gdy szerokość jest mniejsza niż 768 pikseli. Ale chcę, aby pasek nawigacyjny zwinął się, gdy szerokość jest mniejsza niż 1000 pikseli. Czy nie musisz pokazywać .collapse między 768 a 1000?
Nearpoint
tak, collapseklasa jest ważna dla ekranu mobilnego, więc jeśli szerokość jest mniejsza niż 768px, pasek nawigacyjny będzie display:none, więc wymagane działanie zostanie zastosowane wewnątrz znaku 768 i 1000 ...
SaurabhLP
64
to nie działa na Bootstrap 3, ponieważ istnieje inna reguła, navbar-collapse.collapsektóra ma display: block !important. Wyłączenie spowoduje, że przycisk zwinięcia nie pojawi się ... więc myślę, że jest wiele klas, które należy przedefiniować, nie tylkocollapse
Daniele Ricci
42
Tak, kilka klas Bootstrap musi zostać zastąpionych w niestandardowym zapytaniu o media: bootply.com/120604
Zim
1
Haha, kto do diabła zbudował bootstrap? Nie sądziłeś, że będziemy musieli zmienić ten drobiazg?
MH
400

AKTUALIZACJA 2018

Bootstrap 4

Zmiana punktu przerwania paska nawigacyjnego jest łatwiejsza w Bootstrap 4 za pomocą navbar-expand-*klas:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = menu mobilne na ekranach xs <576px
  • navbar-expand-md = menu mobilne na ekranach sm <768px
  • navbar-expand-lg = menu mobilne na ekranach md <992px
  • navbar-expand-xl = menu mobilne na ekranach LG <1200px
  • navbar-expand = nigdy nie używaj menu mobilnego
  • (no expand class) = zawsze używaj menu mobilnego

Jeśli wykluczysz, navbar-expand-*menu mobilne będzie używane przy allszerokościach. Oto demo wszystkich 6 stanów paska nawigacyjnego : Bootstrap 4 Przykład paska nawigacyjnego

Możesz także użyć niestandardowego punktu przerwania (??? px), dodając trochę CSS. Na przykład tutaj jest 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Niestandardowy punkt przerwania paska nawigacyjnego
Bootstrap 4 Przykłady punktu przerwania paska nawigacyjnego


Bootstrap 3

W przypadku Bootstrap 3.3.x oto działający CSS, który zastępuje punkt przerwania paska nawigacyjnego. Zmień 991pxwymiar piksela w punkcie, w którym pasek nawigacyjny ma się zwinąć ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

Przykład roboczy dla 991px: http://www.bootply.com/j7XJuaE5v6
Przykład roboczy dla 1200px: https://www.codeply.com/go/VsYaOLzfb4 (z formularzem wyszukiwania)

Uwaga: powyższe działa dla wszystkiego powyżej 768px . Jeśli trzeba zmienić na mniej niż 768px na przykład mniej niż 768px jest tutaj .


Zim
źródło
Spróbuj pierwszej wizyty: [link] ( getbootstrap.com/customize Lokalizuj: „Mniej zmiennych” -> „Punkty przerwania zapytań o media” Zmiana: @ screen-lg wartość z 1200px na 1920px Zlokalizuj: „System siatki” -> @ grid-float -breakpoint Zmień: @ screen-sm-min na @ screen-lg Przewiń do końca strony Kliknij „Kompiluj i pobierz” Wyodrębnij i użyj pobranych plików
rpalzona
6
Powyższy kod działa, gdy ustawię wartość wyższą niż 768px, ale muszę osiągnąć odwrotność ... Chcę tylko, aby zwinął się na przykład przy 400px, ale kiedy ustawię tę wartość, bootstrap wydaje się odbierać oryginalny 768 - Jakieś pomysły? Dzięki
Chris Richards
6
Chociaż ta odpowiedź działa jak urok, ale bałagan w menu rozwijanym , być może trzeba poprawić odpowiedź.
Abhishek Pandey,
2
@AbhishekPandey Znalazłem użyteczną tę odpowiedź (część dotycząca rozwijania)
cbuchart
1
Dziękuję Ci. W przeciwieństwie do „rozwiązania” ze znacznikiem wyboru obok niego, twój kod faktycznie działa.
Michael S. Miller,
46

w bootstrap3 zmień tę zmienną @ grid-float-breakpoint na potrzebną. Wartość domyślna to 768px

Fengd
źródło
17
Czy możesz podać przykład?
e.thompsy
2
Pamiętaj, że jeśli używasz sass i nie chcesz zastępować kodu dostawcy (nie powinieneś), musisz dołączyć plik zawierający zmienną z niestandardową wartością przed plikami sass bootstrap. Powodem jest to, że wszystkie zmienne Bootstrap są ustawione na domyślne! wartości, więc musimy zastąpić te wartości, najpierw importując nasze zmienne.
Makis K.,
Dodaj przykład tego, jak to zrobić ... Jestem nowy w bootstrapie, a grep ujawnia 0 wystąpień tej zmiennej w moim projekcie.
Matt Clark,
1
@MattClark @grid-float-breakpointjest zdefiniowany w kompilatorze: getbootstrap.com/customize - wartość domyślna to, @screen-sm-minale można ją zmienić na 1234px.
rybo111
24

W końcu opracowano sposób zmiany szerokości zwinięcia, bawiąc się „@ grid-float-breakpoint” na stronie http://getbootstrap.com/customize/ .

Przejdź do wiersza 2923 w pliku bootstrap.css (również w wersji minimalnej) i zmień @media screen and (min-width: 768px) {na@media screen and (min-width: 1000px) {

Tak więc kod skończy się na:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}
Stephen
źródło
Zwróć uwagę, że numer, który podałeś, będzie inny, jeśli użyłeś Customizer: getbootstrap.com/customize
henrywright
1
Właśnie zmieniłem @grid-float-breakpointmoje responsive.lessprace dla mnie!
cvng
6
Powinieneś zastąpić to w innym pliku CSS zamiast bezpośrednio zmieniać pliki css bootstrap.
Ivanka Todorova
1
Pierwsza wizyta: [link] ( getbootstrap.com/customize Lokalizuj: „Mniej zmiennych” -> „Punkty przerwania zapytań o media” Zmiana: @ screen-lg wartość z 1200px na 1920px Zlokalizuj: „System siatki” -> @ grid-float-breakpoint Zmień: @ screen-sm-min na @ screen-lg Przewiń do końca strony Kliknij „Kompiluj i pobierz” Wyodrębnij i użyj pobranych plików
rpalzona
13

Właśnie to zrobiłem, używając następującego kodu CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}
ruperto17
źródło
2
Nie wyświetla zwiniętego przycisku menu, gdy szerokość wynosi od 768 do 1000 pikseli.
rzemieślnik
4
@craftsman: W przypadku przycisku użyj tego: .navbar-toggle {display: block! ważne; } .navbar-header {szerokość: 100%; wysokość: 60 pikseli; }
Aniket Suryavanshi
3
nadal nie wyświetla treści w menu hamburgerów
behzad
13

W kodzie źródłowym Bootstrap 3 .LESS zdefiniowana jest zmienna variables.lesswywołana, @grid-float-breakpointktóra ma następujący pomocny komentarz:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

Dopasowana @grid-float-breakpoint-maxwartość jest ustawiona na tę minus 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Rozwiązanie:

Więc @grid-float-breakpointzamiast tego ustaw wartość na 1000px i przebuduj bootstrap.lessw bootstrap.css:

na przykład

@grid-float-breakpoint: 1000px;
Gone Coding
źródło
Jak odbudować? Wypróbowałem tę linię poleceń: $ lessc bootstrap.less bootstrap.cssale nic się nie stało
AnthonyR
@AnthonyRn: Nie mam pojęcia, jak wygląda twój projekt. Po prostu zaktualizowałem źródło MNIEJ Bootstrap w moim projekcie VS 2013 i przebudowałem go po zapisaniu. może powinieneś zadać nowe pytanie?
Gone Coding
Mój problem został rozwiązany za pomocą internetowego narzędzia dostosowywania Bootstrap tutaj getbootstrap.com/customize Dziękujemy za rozwiązanie!
AnthonyR
1
Myślę, że powinna to być zaakceptowana odpowiedź, ponieważ używa własnych metod Bootstraps do definiowania punktu przerwania. Jako przykład, byłem w stanie po prostu „przebudować” bootstrap i uzyskać pożądany wynik, ustawiając tę ​​zmienną na wartość, której potrzebowałem, aby być punktem przerwania.
Serge Melis
@AnthonyR Aby przebudować, użyj polecenia grunt, grunt distktóry zregeneruje katalog dist. Uruchomisz tę komendę z katalogu, w którym znajduje się plik gruntfile.js. Odniesienie: getbootstrap.com/getting-started/#grunt
Radmation
11

Sposób Sass zmieniania zmiennych bootstrap jest faktycznie udokumentowany na stronie github bootstrap-sass .

Przedefiniuj zmienne przed @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
Tropikalna ryba
źródło
7

Oprócz odpowiedzi @Skely, aby menu rozwijane wewnątrz paska nawigacyjnego działały, dodaj także ich klasy, które mają zostać zastąpione. Końcowy kod poniżej:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

kod demonstracyjny

jacvalle
źródło
4

W bootstrap v4 nawigacja może zostać zwinięta wcześniej lub później za pomocą różnych klas css

na przykład:

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

Za pomocą przycisku do nawigacji:

  • ukryty sm-up
  • hidden-md-up
  • ukryte-lg-up
Eddie Jaoude
źródło
W obecnej wersji alfa wydaje się, że chodzi tylko navbar-toggleable-smdla mnie, xssprawia, że ​​nigdy się nie przełącza. Może to ja robię coś złego. Dzięki!
nerdwaller
@nerdwaller wygląda na to, że masz rację, dokonałeś edycji z xs na sm.
Whitneyland
3

W przypadku Bootstrap 3.3 jest to jedyny potrzebny kod:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
VeeK
źródło
Nie działa całkowicie. Wyświetlane elementy menu nie są pionowe, ale poziome.
Volomike
3

To działało dla mnie Bootstrap3

@media (min-width: 768px) {
    .navbar-header {
          float: none;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-collapse.collapse.in {
          display: block!important;
      }
      .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

Zajęło trochę czasu, aby dowiedzieć się o tych dwóch:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}
Khaled
źródło
To zadziałało dla mnie. Jedynym wyjątkiem jest to, że minimalna szerokość piksela powinna wynosić 1000px w powyższej próbce.
Sascha
2

Najlepszym rozwiązaniem byłoby skorzystanie z portu używanego procesora CSS.

Jestem wielkim fanem SASS, więc obecnie używam https://github.com/thomas-mcdonald/bootstrap-sass

Wygląda na to, że jest tu widelec do rysika: https://github.com/Acquisio/bootstrap-stylus

W przeciwnym razie Search & Replace jest twoim najlepszym przyjacielem w wersji css ...

Allaire
źródło
Czy w przypadku opcji wyszukiwania i zamiany oznacza to bezpośrednią edycję zapytań o media bootstrap.css? Czy mogę zmienić zapytanie dotyczące mediów, które dotyczy tylko paska nawigacyjnego? Powiedziano mi, że edytowanie źródłowych plików bootstrap nie jest dobrym pomysłem, ale nie wiem dlaczego, co myślisz?
Nearpoint
1

Cześć, myślę, że możesz to zrobić za pomocą CSS w ten sposób, możesz zmienić menu ładowania punktu początkowego

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}
Yasssine ELALAOUI
źródło
1

Paski nawigacyjne mogą korzystać z klas .navbar-toggler, .navbar-collapse i .navbar-expand {-sm | -md | -lg | -xl}, aby zmienić, gdy ich zawartość zawinie się za przyciskiem. W połączeniu z innymi narzędziami możesz łatwo wybrać, kiedy chcesz pokazać lub ukryć określone elementy.

W przypadku pasków nawigacyjnych, które nigdy się nie zwalniają, dodaj klasę .navbar-expand na pasku nawigacyjnym. W przypadku pasków nawigacyjnych, które zawsze się zwalniają, nie dodawaj żadnych klas .navbar-expand.

Na przykład :

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

Menu mobilne jest wyświetlane na dużym ekranie.

Odniesienie: https://getbootstrap.com/docs/4.0/components/navbar/

Aung San Myint
źródło
Tak, ten działa dla mnie dokładnie tak, jak potrzebowałem. Oczywiście, jeśli potrzebujesz bardziej szczegółowych punktów przerwania, konieczna będzie konfiguracja własnego zapytania medialnego (stąd pozytywna odpowiedź na to pytanie)
Coderhi
0

Oto, co zrobiło dla mnie lewę:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
jeanverster
źródło
Z twojego rozwiązania i rozwiązania Veek stwierdzam, że między 768 a 1000 marginesy powiększają się nieprawidłowo. Są w porządku poza tymi limitami. W twoim rozwiązaniu ikona zwiniętego menu również nie pozostaje po prawej stronie po zwinięciu, ale naciska na „markę”.
Mike O'Connor,
Tak mi przykro, najwyraźniej wygłupiałem się. Nadal mam problem z niewłaściwie szerokimi marginesami występującymi w tych granicach. Widzę jednak teraz, że oficjalny przykład bootstrapu online ma ten sam problem z marginesami.
Mike O'Connor,
0

W bootstrap 4, jeśli chcesz przejechać, gdy navbar-expand- *, rozwija się i zwija oraz pokazuje i ukrywa hamburgera (navbar-toggler), musisz znaleźć ten styl / definicję w bootstrap.css i przedefiniować go w swoim własny customstyle.css (lub bezpośrednio w bootstrap.css, jeśli masz na to ochotę).

Na przykład. Chciałem, aby navbar-expand-lg zwinął się i pokazuje przełącznik navbar w 950px. W bootstrap.css znajduję:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

A poniżej tego ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Skopiowałem oba zapytania @media i umieściłem je w moim style.css, a następnie zmodyfikowałem rozmiar, aby dostosować go do moich potrzeb. W moim przypadku chciałem, aby zwinął się przy rozdzielczości 950 pikseli. Kwerendy @media muszą mieć różne rozmiary (tak mi się wydaje), więc ustawiłem maksymalną szerokość kontenera na 949.98px i użyłem 950px dla innego zapytania @media, więc poniższy kod został dołączony do mojego style.css. Niełatwo było oddzielić od skręconych rozwiązań, które znalazłem na Stackoverflow i gdzie indziej. Mam nadzieję że to pomoże.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}
Jack Mason
źródło
0

Tutaj mój działający kod używa w React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>
webmastx
źródło
0

Jest teraz obsługiwany w Bootstrap 4.4

navbar-expand-sm 
Stóg
źródło
Tak, poprawne, ale aby zwinąć nawigację na dużych ekranach, potrzebujesz paska nawigacyjnego-rozwiń-lg
Coderhi