Forza gli elementi della barra di navigazione per rimanere in una riga

Non voglio che gli elementi del mio Bootstrap Navbar rimangano in una riga ad ogni larghezza.

So che questa domanda è già stata posta diverse volte e ho provato varie soluzioni, ma nessuno ha funzionato per il mio caso.

Ecco il mio codice:

#head-navbar { width: 100%; white-space: nowrap; display: inline-block; overflow: hidden; } .nav>li { display: inline-block; white-space: nowrap; } 
     

Voglio che il mio Navbar assomigli a questo su uno schermo più piccolo:

inserisci la descrizione dell'immagine qui
e non così:

inserisci la descrizione dell'immagine qui

Basta aggiungere display: inline-block; al tuo li e saranno visualizzati in linea.

 .nav>li { display: inline-block; } 

Inoltre, se vuoi visualizzare entrambi gli ul nella stessa riga, puoi fare la stessa cosa con gli ul elementi. Qui hai un jsfiddle per entrambi gli ul inline.

Anche in Firefox avrai un breakpoint in 768px, quindi dovresti rimuovere lo white-space:nowrap

 #head-navbar { white-space: normal; } 

Ps: non so se si tratta di un TYPO ma dovresti usare .pull-right invece di .navbar-right per far .navbar-right a destra un elemento

È a causa delle domande dei media , quindi su schermi più piccoli cambia lo stile. Basta aggiungere questi:

  .navbar-nav { float: right; margin: 0; } .navbar-nav > li { float: right; } 

Aggiungi il seguente css, Questo dovrebbe funzionare per te.

 #head-navbar { width: 100%; white-space: nowrap; display: inline-block; overflow: hidden; } .nav>li { display: inline-block; width:initial; float:left; white-space: nowrap; } .nav { display: inline-block; } @media screen and (max-width:768px) { .nav.navbar-nav.pull-right { float:none !important; } } 
     
 .pull-right{ float:right; } #head-navbar { width: 100%; white-space: nowrap; display: inline-block; overflow: hidden; } .nav>li { display: inline-block; width:initial; float:left; white-space: nowrap; } .nav { display: inline-block; } @media screen and (max-width:768px) {