Jak prawidłowo skonfigurować responsywne menu - problem przy zmianie rozmiaru strony.

0

Cześć!

Mam problem z konfiguracją nawigacji w bootstrapie.

Kod źródłowy:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sample Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
        <li><a href="#">Page 6</a></li>
        <li><a href="#">Page 7</a></li>
        <li><a href="#">Page 8</a></li>
        <li><a href="#">Page 9</a></li>
        <li><a href="#">Page 10</a></li>
        <li><a href="#">Page 11</a></li>
      </ul>
    </div>
  </div>
</nav>

</body>
</html>

Istota problemu:

Strona na pełnym ekranie wygląda tak:

screenshot-20170315120836.png

Przy zmniejszaniu szerokości strony div z pozycjami menu ustawia się pod kontenerem z headerem nawigacji. Wygląda to następująco:

screenshot-20170315121119.png

Dodatkowo podczas dalszego zmniejszania pozycje menu zwijają się w taki oto sposób:

screenshot-20170315121228.png

Dopiero po dalszym zmniejszaniu pojawia się rozwijane menu:

screenshot-20170315121415.png

Pożądany efekt:

Pożądana przeze mnie sytuacja to zwijanie się nawigacji do postaci przycisku po przekroczeniu sumarycznej wartości szerokości pozycji menu (przejście od razu z sytuacji pierwszej do czwartej). Dobrze by było, aby działo się to niezależnie od liczby pozycji w menu aby uniknąć potrzeby edycji kodu źródłowego za każdym razem, gdy dodany zostanie nowy element menu. Docelowo bowiem nawigacja ma funkcjonować jako element szablonu WordPressa, gdzie użytkownik będzie mógł stworzyć dowolną ilość elementów menu.

Pytania:

  1. Jak zmienić defaultowy breakpoint w bootstrapie tak, żeby po zmniejszeniu strony do danej szerokości od razu pojawiało się zwinięte menu?
  2. Czy można uzależnić zmodyfikowany breakpoint od ilości liczby elementów menu (sumarycznej ich szerokości)?
  3. Czy można to zrobić innym/łatwiejszym/wydajniejszym sposobem?

Z góry dziękuję za wszystkie odpowiedzi.

1 
@media (max-width: 1200px) {
    .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;
    }
}

gdzie wartość max-width: odpowiada za przejście do "hamburgera" musisz przeliczyć ile zajmują pozycje w menu w jakimś devtoolsie i dostosować wartość

1

Szerokość ekranu nie jest z gumy musi być jakiś limit... z reguły taka ilość elementów menu nie jest dobrym rozwiązaniem, lepiej jest stworzyć submenu.

Ad. 1. Tak można.

 @media (max-width: 1500px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle{
        display: block;
    }
    .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;
    }
    .first-h-p{
        margin-top: 50px;
    }
    .navbar-default .navbar-nav > li > a {
        color: white;
    }
}

Ad. 2 Można, np. za pomocą js, dodając odpowiednie klasy w zależności od ilości elementów menu.

Ad. 3 Najprościej za pomocą media queries zmieniać style takie jak margin, padding, font-size - wszystkich które wpływają na wielkość elementów menu. Ja najczęściej rozwiązuje problem przepełnionego menu w taki sposób np. http://gotowa-strona.andraszyk.eu/

Za pomocą media queries w zależności od danej szerokości można też usunąć logo z menu, lub też zamienić je na dostosowane do mniejszej rozdzielczości ekranu i zyskać trochę miejsca.

1 użytkowników online, w tym zalogowanych: 0, gości: 1