Come personalizzare un Bootstrap (hamburger) menu

Nell’articolo precedente abbiamo visto come creare un menu responsive con Bootstrap usando la componente navbar. In questo articolo vedremo come personalizzare e modificare l’orientamento del nostro Bootstrap menu.

Come abbiamo già visto, ad una barra di navigazione creata con Bootstrap possiamo aggiungere facilmente: un marchio con del testo ed un immagine, un campo di ricerca o del testo. Oggi vedremo come allineare le voci del menu a sinistra, a destra o al centro, come modificare il colore del testo e dello sfondo e tanto altro.

Allineare le voci del menu

Innanzitutto, vediamo come fare per allineare le voci del menu all’interno della barra di navigazione.

Di default il menu è allineato a sinistra, ma possiamo centrarlo o spostarlo a destra.

Ti dico subito che un menu di navigazione responsive creato con .navbar e leggermente diverso da uno creato semplicemente con la classe nav. Quindi non sempre si ottiene lo stesso risultato visivo con le stesse classi CSS di Bootstrap.

Per esempio, per centrare le voci del menu in entrambi i casi, puoi usare la classe .justify-content-center ma in modo diverso. In quello non responsive, cioè creato con nav, puoi centrarlo in questo modo:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Mentre, un menu responsive, cioè creato con la componente navbar di Bootstrap, lo puoi centrare aggiungendo la classe .justify-content-center al div genitore con la class=collapse che lo contiene:

   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>

Ovvero, con la classe mx-auto assegnata al tag <ul class=”navbar-nav mx-auto“>:

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item active">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>

In ogni caso, in tutti gli esempi qui sopra, portano allo stesso risultato.

Per spostare le voci del menu a destra devi sostituire, negli esempi visti sopra, justify-content-center con justify-content-end e mx-auto con ml-auto.

Se vuoi creare un menu verticale, ovviamente, non ti serve farlo sparire sostituendolo con il c.d. pulsante ad hamburger su schermi ridotti. Quindi puoi usare semplicemente la classe nav abbinata a .flex-column in questo modo:

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

O più semplicemente:

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

In entrambi i casi il risultato è lo stesso.

Coloriamo il nostro menu Bootstrap

Bootstrap ha delle classi di colore predefinite che puoi usare velocemente per colorare del testo o lo sfondo di un elemento. Per esempio, per colorare lo sfondo di un qualsiasi elemento, le classi dei colori principali sono: .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white, .bg-transparent.

Per colorare il testo basta sostituire il prefisso bg- con text-.

Mentre, per quanto riguarda la barra di navigazione, Bootstrap mette a disposizione ulteriori classi che sono navbar-dark da usare su background scuri in modo da ottenere il testo bianco, o navbar-light per avere il testo nero su sfondi chiari. Ecco alcuni esempi:

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Adesso vediamo come fissare il menu in basso o in alto.

Bootstrap navbar sticky o fixed

Di default la barra di navigazione scorre con la finestra, ma se vogliamo possiamo fissarla in alto, in basso o fissarla in alto solo quando scorriamo in basso la pagina.

Per fissarla in alto usiamo fixed-top.

Con .fixed-top la barra di navigazione si sgancerà dal contenuto e si fisserà in alto. Ma tieni presente che essendo indipendente dal resto della pagina ed avendo z-index maggiore, potrebbe coprire il contenuto delle prime righe. Quindi, per evitare questo inconveniente, è buona norma prevedere dello spazio vuoto in cima alla pagina di altezza almeno pari all’altezza della navbar.

Ecco un esempio di codice di una navbar fixed-top:

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

Se invece vogliamo fissarla in basso, dobbiamo sostituire fixed-top con fixed-bottom:

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

Il più delle volte, la barra con il menu di navigazione è all’interno dell’intestazione di un sito e si fissa in automatico in alto nel momento in cui la pagina scorre verso il basso.

Per ottenere questo effetto con la sidebar di Bootstrap si usa la classe sticky-top.

Ma tieni presente che poiché Bootstrap usa la direttiva CSS position: sticky non tutti i browser la supportano.

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Abbiamo terminato anche questa panoramica su Bootstrap sidebar, su come personalizzarla in base alle nostre esigenze e su come realizzare un menu responsive con pulsante ad hamburger.

Nei prossimi articoli vedremo gli altri componenti fondamentali di Bootstrap, utili per realizzare qualsiasi progetto con interfaccia grafica che si adatta facilmente a qualsiasi dispositivo.

Per qualsiasi informazione o chiarimento non esitare a contattarci attraverso la nostra pagina Facebook o via email.

Articolo successivo -> Bootstrap Button: Aggiungere bottoni con Bootstrap

Bootstrap navbar, come creare un menu responsive <- Articolo precedente