Aggiunta di un'icona di telefono e mappa a sinistra dell'icona di hamburger bootstrap

Question

Ho un sito Web di bootstrap v3 di base. Quando la barra di navigazione passa all'icona dell'hamburger su schermi più piccoli, vorrei aggiungere un'icona di telefono (che collega a un numero di telefono) e un'icona di mappa (che collega a google maps) in modo che gli utenti mobili possano accedervi facilmente. Ho provato ad aggiungere un'icona del telefono a sinistra dell'hamburger, aggiungendo il codice appena prima del pulsante di attivazione di .navbar, ma non riesco a capire come renderlo reattivo come l'icona di un hamburger. Posso posizionarlo, ma questo non lo rende reattivo.

Ecco il mio codice corrente. Ho provato a farlo funzionare con solo l'icona del telefono, ma mi piacerebbe anche che fosse posizionata accanto a un'icona di mappa. La maggior parte dello stile è stata copiata dallo stile della classe .nav-bar-toggle nel file bootstrap.min.css.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar i { 
 
    font-size: 200%; 
 
    position: relative; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a href="#"><img src="img/autohaus-logo.png" class="navbar-brand"></a> 
 
     <a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a> 
 
     <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">      
 
     <span class="sr-only">Toggle Navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Come aggiungere le icone uncollapsible al Bootstrap Navbar

Usiamo il Default navbar dalla documentazione Bootstrap.

1. Aggiungere la struttura <ul class="nav navbar-nav"><li></li></ul> alla fine del blocco <div class="navbar-header">. Questa struttura non verrà compressa su uno schermo stretto.
2. Aggiungi the visible-xs class al tag <ul>. Quindi sarà visibile solo su uno schermo stretto.
3. Aggiungi icone come elementi di questa struttura.
4. Aggiungi the pull-right class a ciascun tag <li>. Questi elementi saranno posizionati vicino al pulsante di attivazione/disattivazione.

Si prega di verificare il risultato. E 'quello che vuoi raggiungere?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
     <ul class="nav navbar-nav visible-xs"> 
 
     <li class="pull-right"><a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a></li> 
 
     <li class="pull-right"><a href="#"><i class="glyphicon glyphicon-map-marker"></i></a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>