Link di bootstrap non cliccabili

per favore vedi l’esempio: http://bit.ly/1H27G9I

Sto cercando di cambiare lo stile della barra di navigazione standard del bootstrap in modo che ci siano collegamenti a sinistra ea destra del logo nel mezzo. Sono riuscito con il posizionamento, tuttavia i collegamenti a sinistra non sono più cliccabili. Ho letto che potrebbe avere a che fare con lo z-index, ma questo non sembra aver risolto il problema.

Ho allegato il mio codice html con alcuni css personalizzati. Ogni consiglio è molto apprezzato!

.headerlogo{ position: absolute; width: 100%; left: 0; top: 0; height: 125px; } .navbar-brand { padding-top: 35px; width: 160px; margin: 0 auto; position: absolute; left: 50%; margin-left: -80px; /* Half the width */ } .navbar-left { padding-top: 35px; padding-left: 200px; } .navbar-right { padding-top: 35px; padding-right: 200px; } @media (min-width: 970px){ .navbar-default { height: 125px; background-color: #151515; } .res-img { max-width:160px; margin-top: -15px; } } @media (max-width: 970px){ .navbar-default { height: 80px; background-color: #151515; } .res-img { max-width:100px; margin-top: -15px; } .headerlogo { position: absolute; width: 300px; left: 0; top: 0; height: 125px; } .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } } 
      Bootstrap 101 Template            

Sbarazzarsi height: 125px; proprietà sulla class .headerLogo . Questo fa sì che il div, quando è al 100% della larghezza, si sovrapponga alle prime voci del menu.

Dici che non pensi sia lo z-index. Ma guardando il tuo campione. Io penso che sia. Il tuo logo di intestazione è posizionato in modo assoluto e si sovrappone ai collegamenti.

Fare qualcosa come questo dovrebbe risolverlo.

 .headerlogo { z-index:1; } .navbar-left { position:relative; z-index:9; } 

Fondamentalmente se hai intenzione di stenderlo in questo modo, allora il tuo nav deve avere uno z-index più alto del tuo logo.

Si noti inoltre che questo sembra essere diverso a seconda della risoluzione dello schermo. Quindi è abbastanza probabile che tu stia vedendo che funziona con alcune risoluzioni e rotto in altri.

Immagine dello schermo

inserisci la descrizione dell'immagine qui

Puoi anche applicare: z-index: 10 in css al div contenente.

questo risolve il problema

 .navbar-header { position:relative; z-index: 9001; } .navbar-collapse { z-index: 9000; }