Barra di navigazione Bootstrap 3 con logo

Voglio usare la barra di navigazione predefinita Bootstrap 3 con un logo immagine invece del marchio di testo. Qual è il modo corretto di farlo senza causare problemi con dimensioni dello schermo diverse? Presumo che questo sia un requisito comune, ma non ho ancora visto un buon esempio di codice. Un requisito chiave oltre alla visualizzazione accettabile su tutte le dimensioni dello schermo è la possibilità di comprimere i menu su schermi più piccoli.

Ho provato a inserire un tag IMG all’interno del tag A che ha la class del marchio navbar, ma questo ha causato il mancato funzionamento del menu sul mio telefono Android. Ho anche provato ad aumentare l’altezza della class navbar, ma questo ha rovinato ancora di più le cose.

A proposito, l’immagine del mio logo è più grande dell’altezza della barra di navigazione.

Perché tutti cercano di farlo nel modo più duro? Certo, alcuni di questi approcci funzioneranno, ma sono più complicati del necessario.

OK, prima – hai bisogno di un’immagine che si adatti alla tua barra di navigazione. È ansible regolare l’immagine tramite l’attributo altezza css (che consente di ridimensionare la larghezza) oppure è ansible utilizzare solo un’immagine di dimensioni appropriate. Qualunque cosa tu decida di fare, il modo in cui questo apparirà dipenderà dalla tua dimensione.

Per qualche ragione, tutti vogliono incollare l’immagine all’interno di un’ancora con il navbar-brand , e questo non è necessario. navbar-brand applica gli stili di testo che non sono necessari a un’immagine, così come la class di navbar-left della navbar-left (proprio come pull-left, ma per l’uso in una barra di navigazione). Tutto ciò di cui hai veramente bisogno è aggiungere la navbar-left .

  

Puoi anche seguirlo con un articolo di marca navbar, che apparirà a destra dell’immagine.

  

Ridimensionamento del logo della barra di navigazione Bootstrap 3

DEMO COMPLETO CON MOLTI ESEMPI

AGGIORNAMENTO IMPORTANTE: 21/12/15

C’è un bug in Mozilla che ho scoperto che rompe la barra di navigazione su determinate larghezze del browser con molte demo su questa pagina. Fondamentalmente il bug di Mozilla sta includendo il pad sinistro e destro sul link del marchio navbar come parte della larghezza dell’immagine. Tuttavia, questo può essere risolto facilmente e ho provato questo e sono abbastanza sicuro che è l’esempio di lavoro più stabile in questa pagina. Si ridimensionerà automaticamente e funziona su tutti i browser.

Basta aggiungere questo al tuo css e usare navbar-brand nello stesso modo in cui si sarebbe .img-responsive . Il tuo logo si adatterà automaticamente

 .navbar-brand { padding: 0px; /* firefox bug fix */ } .navbar-brand>img { height: 100%; padding: 15px; /* firefox bug fix */ width: auto; } 

Un’altra opzione è usare un’immagine di sfondo. Usa un’immagine di qualsiasi dimensione e poi imposta la larghezza desiderata:

 .navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; width: 200px; } 

RISPOSTA ORIGINARIA QUI SOTTO (solo per riferimento)

La gente sembra dimenticarsi molto degli oggetti. Personalmente penso che sia il più semplice con cui lavorare perché l’immagine si adatta automaticamente alle dimensioni del menu. Se si utilizza solo l’adattamento dell’object sull’immagine, verrà ridimensionata automaticamente all’altezza del menu.

  .navbar-brand > img { max-height: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } 

È stato sottolineato che questo non funziona in IE “ancora”. C’è un polyfill , ma potrebbe essere eccessivo se non si prevede di usarlo per qualcos’altro. Sembra che si stia pianificando l’ object-fit per una futura versione di IE, quindi una volta che ciò accadrà funzionerà su tutti i browser.

Tuttavia, se si nota la class .img-responsive in bootstrap, la larghezza massima presuppone che si stiano mettendo queste immagini in colonne o qualcosa che ha un esplicito con set. Ciò significherebbe che il 100% significa specificamente larghezza del 100% dell’elemento genitore.

  .img-responsive max-width: 100%; height: auto; } 

Il motivo per cui non possiamo usarlo con la barra di navigazione è perché il genitore (.navbar-brand) ha un’altezza fissa di 50px, ma la larghezza non è impostata.

Se prendiamo quella logica e la invertiamo per essere retriggers in base all’altezza, possiamo avere un’immagine retriggers che si adatta all’altezza del marchio .navbar e aggiungendo e impostando automaticamente la larghezza si adatterà alla proporzione.

 max-height: 100%; width: auto; 

Di solito dovremmo aggiungere display:block; allo scenario, ma poiché il marchio navbar ha già float: left; applicato ad esso, agisce automaticamente come un elemento di blocco.


Potresti imbatterti nella rara situazione in cui il tuo logo è troppo piccolo. L’approccio img-responsive non tiene conto di questo, ma lo faremo. Aggiungendo anche l’attributo “height” al file .navbar-brand > img si può essere sicuri che aumenterà o diminuirà.

 max-height: 100%; height: 100%; width: auto; 

Quindi per completare questo li metto entrambi insieme e sembra funzionare perfettamente in tutti i browser.

   

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Anche se la tua domanda è interessante, non mi aspetto che ci sarà una risposta. Forse la tua domanda è troppo ampia. La tua soluzione dovrebbe dipendere da: altri contenuti nella barra di navigazione (numero di elementi), dimensioni del tuo logo, se il tuo logo agisce in modo reattivo, ecc. Aggiungere il logo nella a (con marchio navbar) sembra un buon punto di partenza. Dovrei usare la class brand navbar perché questo aggiungerà un padding (alto / basso) di 15 pixel.

Esamino questa impostazione su http://getbootstrap.com/examples/navbar/ con un logo di 300×150 pixel.

Schermo intero> 1200:

inserisci la descrizione dell'immagine qui

tra 768 e 992 pixel (menu non collassato):

inserisci la descrizione dell'immagine qui

<768 (menu collassato)

inserisci la descrizione dell'immagine qui

Oltre agli aspetti estetici, non ho riscontrato alcun problema tecnico. Sui piccoli schermi, un grande logo si sovrapporrà o si aprirà forse il viewport. Anche gli schermi tra 768 e 992 pixel hanno altri problemi quando il contenuto non rientra in una riga, vedi ad esempio: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

La barra di navigazione predefinita ha L’esempio di barra di navigazione predefinita aggiunge un margine inferiore di 30 px in modo che il contenuto della barra di navigazione non si sovrapponga mai al contenuto della pagina. (i navbars fissi avranno problemi quando l’altezza della barra di navigazione varia).

Avrai bisogno di css e di media query per adattare la barra di navigazione alle tue necessità su schermi di diverse dimensioni. Per favore cerca di restringere la tua domanda. essere descritto il problema che hai trovato su Android.

aggiornamento vedi http://bootply.com/77512 per un esempio.

Su schermi più piccoli come un telefono, il menu compresso appare sopra il logo

scambia il pulsante e il logo nel tuo codice, prima il logo (imposta float: a sinistra sul logo)

Non c’è modo di allineare le voci del menu a qualcosa tranne che in alto

imposta il margin-top per .navbar-collapse ul . Usa l’altezza del logo meno l’altezza della barra di navigazione, per allineare al fondo o (altezza del logo – altezza della barra) / 2 al centro

Istruzioni su come creare una barra di navigazione bootstrap con un logo più grande dell’altezza predefinita (50px):

Esempio con un logo 100px x 100px, CSS standard:

  1. Calcola l’altezza e (padding top + padding bottom) del logo. Qui 120px (altezza 100px + imbottitura superiore (10px) + imbottitura inferiore (10px))

  2. Vai al bootstrap / personalizza . Imposta invece di altezza della barra 50px> 120px (50 + 70) e navbar-collapse-max-height da 340px a 410px (340 + 70). Scarica css.

  3. In questo esempio io uso questa barra di navigazione . Nel marchio navbar :

      ... 

    aggiungi un corso, ad esempio myLogo e un img (il tuo logo)

    .

  4. Aggiungi CSS

    .myLogo {padding: 10px; }

  5. Adeguato ad altre dimensioni.

Esempio

Bene, ho finalmente risolto lo stesso problema, ecco la mia soluzione e l’ho testata sul mio sito in tutti e tre i principali browser: Chrome, Firefox e Internet Explorer.

Prima di tutto, se non si utilizza un logo basato su testo, rimuovere completamente “navbar-brand” poiché ho trovato questa particolare class come la causa principale del mio menu di navigazione compresso che si raddoppia.

Gridare a user3137032 per avermi guidato nella giusta direzione.

Devi creare un contenitore immagine reattivo personalizzato, ho chiamato il mio “logo”

Ecco il markup HTML di bootstrap:

  

E il codice CSS:

 .logo img { width: 100% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 100%; } @media (max-width:480px) { .logo img { width: 70% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 70% !important; } } @media (max-width:400px) { .logo img { width: 75% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 75%; } } @media (max-width:385px) { .logo img { width: 70% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 70%; } } @media (max-width:345px) { .logo img { width: 65% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 65%; } } @media (max-width:335px) { .logo img { width: 60% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 60%; } } @media (max-width:325px) { .logo img { width: 55% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 55%; } } @media (max-width:315px) { .logo img { width: 50% \9; /*Force IE10 and below to size SVG images correctly*/ max-width: 50%; } } 

Il valore in @media (larghezza massima: x) può variare a seconda della larghezza delle immagini del logo, il mio è 368px. Potrebbe essere necessario modificare anche le percentuali in base alle dimensioni del tuo logo. La prima query @media dovrebbe essere la tua soglia e la mia era la larghezza dell’immagine (368px) + la dimensione del pulsante compresso (44px) + circa 60px ed è uscita a 480px che è il punto in cui avvio il ridimensionamento delle immagini reattive.

Assicurati di rimuovere la syntax del razor dalle parti HTML. Fammi sapere se risolve il tuo problema, ha risolto il mio.

Modifica: Siamo spiacenti, ho perso il problema dell’altezza della tua barra di navigazione. Ci sono un paio di modi per farlo, personalmente compilo il Bootstrap LESS con l’altezza della barra appropriata, per i miei scopi uso 70px e l’altezza dell’immagine è di 68 px. Il secondo modo per farlo è nel file bootstrap.css stesso, cerca “.navbar” e modifica l’altezza minima: all’altezza del tuo logo.

Io uso la class img-responsive e quindi imposta una larghezza massima sull’elemento. Come questo:

  

e il CSS:

 .navbar-brand { max-width: 50%; } 

La mia soluzione è aggiungere css “display: inline-block” al tag img.

  

DEMO: jsfiddle

È necessario utilizzare il codice come questo:

  

La class del tag A deve essere “logo” e non marca navbar.

Dipende da quanto vuoi che il tuo logo sia alto.

L’altezza predefinita nella barra di navigazione è 20px, quindi se si specifica height: 20px sul logo, si allinea bene.

Comunque è un po ‘piccolo per un logo, quindi quello che ho optato per questo è stato:

  

Ciò rende l’immagine alta 30 px e allinea verticalmente l’immagine aggiungendo un margine negativo verso l’alto (5px è la metà della differenza tra il riempimento su ae la dimensione dell’immagine).

In alternativa puoi cambiare il padding sull’elemento , ad esempio:

  

Correzione rapida : crea una class per il tuo logo e imposta l’ height a 28px . Funziona bene con la barra di navigazione su tutti i dispositivi. Notate che ho detto “BENE”.

 .logo { display:block; height:28px; } 

Il mio approccio è quello di includere QUATTRO diverse immagini di diverse dimensioni per telefoni, tablet, desktop, desktop di grandi dimensioni, ma mostra solo UNO utilizzando le classi di utilità reattive di bootstrap, come segue:

  <?php bloginfo('name'); ?/> Logo <?php bloginfo('name'); ?/> Logo <?php bloginfo('name'); ?/> Logo <?php bloginfo('name'); ?/> Logo 

Nota: è ansible sostituire la riga commentata con il codice fornito. Sostituisci il codice php se non stai usando wordpress.

Modifica Nota2: Sì, questo aggiunge richieste al tuo server quando si carica la pagina che potrebbe rallentare un po ‘ma se si utilizza una tecnica di css sprite in background, è probabile che il logo non venga stampato quando si stampa una pagina e il codice sopra dovrebbe ottenere migliore SEO.

Lo implemento anche tramite la proprietà di background css. Funziona in modo sano in qualsiasi valore di larghezza.

 .navbar-brand{ float:left; height:50px; padding:15px 15px; font-size:18px; line-height:20px; background-image: url("../images/logo.png"); background-repeat: no-repeat; background-position: left center } 

Un altro approccio consiste nell’implementare la class .text-hide incorporata di Bootstrap insieme a .navbar-brand per sostituire il testo / il contenuto del brand con un’immagine di sfondo.

CSS:

 .navbar-brand{ background: url(http://example.com/your-logo-here.png) center / contain no-repeat; width: 200px; } 

HTML:

 Navbar Brand 

Questo è un metodo molto coerente e mantiene centrata l’immagine. Per regolare la dimensione dell’immagine tutto ciò che devi fare è regolare .navbar-brand width poiché l’altezza è già impostata.

Ecco una demo dal vivo

Ho avuto lo stesso problema. L’ho risolto così:

    

Non esiste una class di marca navbar. Il risultato sembra un’immagine del logo che si adatta alla barra di navigazione e funziona come un collegamento. Inoltre raccomando di usare la class navbar-right per le voci del menu in modo che non vadano sotto il logo.

  

Forse è troppo semplice, ma ho appena copiato la linea del marchio navbar in modo che ce ne siano due, l’immagine e poi il testo.

   My Brand 

E ho creato un’immagine che si inserisce all’interno della barra di navigazione (circa 1/2 dell’altezza).

Se si utilizza MENO, questo funziona:

 @navbar-height: 150px; @navbar-brand-vpadding: 10px; .navbar-brand img { height: @navbar-height - @navbar-brand-vpadding * 2; position: absolute; top: @navbar-brand-vpadding; } 

Questo codice funziona perfettamente se hai bisogno di vedere il marchio centrato e con larghezza automatica nella barra degli strumenti. Contiene la funzione WordPress per ottenere il file immagine dal percorso corretto:

   

il mio codice funzionante – bootstrap 3.0.3. quando si triggers la barra di navigazione, l’immagine del logo originale di hidden-xs.

    brand logo  

Potresti provare a utilizzare la query @media come di seguito.

Aggiungi prima una class logo, quindi usa @media per specificare l’altezza e la larghezza del logo in base alle dimensioni del dispositivo. Nell’esempio qui sotto, ho come target dispositivi con una larghezza massima di 320 px (iPhone). Puoi giocare con questo fino a trovare la soluzione migliore. Un modo semplice per testare: usa chrome o Firefox con l’elemento inspect. Riduci il tuo browser il più lontano ansible. Osservare la modifica della dimensione del logo in base alla larghezza massima @media specificata. Prova su iPhone, dispositivi Android, iPad, ecc. Per ottenere i risultati desiderati.

 .logo { height: 42px; width: 140px; } @media (max-width:320px) { .logo { height: 33px; width: 110px; } } 

Si prega di provare il seguente codice:

     

Non riuscendo a far funzionare nessuna delle altre risposte nel mio caso (probabilmente non ho superato il test di intelligenza) e dopo alcuni esperimenti, questo è quello che sto usando (che credo sia molto vicino al default di Bootstrap):

   

E nel file CSS ho aggiunto quanto segue:

 .navbar-brand { padding-top: 5px; } .navbar-collapse { float: left; } .navbar-logo { float: left; } 

Nota che @Html.ActionLink() è la syntax del Rasoio per un tag . Dove dice @Html.ActionLink(...) basta sostituirlo con un tag appropriato. Allo stesso modo, dove dice https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/@Url.Action(...) sostituirlo con un URL appropriato (nessun tag in quel caso).

Questo non è semantico, ma semplicemente uso a elemento esistente, imposta un’immagine di sfondo, quindi creo più varianti per una risoluzione @ 2x, dimensioni dello schermo più piccole, ecc.

Quindi, puoi usare la class .text-hide per ottenere del testo sulla pagina alla maniera originale. Semplice ed efficace anche se l’uso non corretto di un’immagine.

Ecco un link alla class helper per la sostituzione del testo:

http://getbootstrap.com/css/https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/#helper-classs

La risposta più semplice e migliore per questa domanda è impostare una larghezza e un’altezza massime in base al logo, l’immagine sarà al massimo di 50 px di altezza ma non più di 200 px.

    

Questo varierà a seconda delle dimensioni del tuo logo e degli elementi della barra di navigazione che hai.

  

Ti preghiamo di comprendere il codice a tuo piacimento: D Questo è il mio codice bozza e funziona già 🙂 Ecco lo screenshot.

inserisci la descrizione dell'immagine qui

Invece di sostituire il branding del testo, mi sono diviso in due righe come nel codice qui sotto e ho dato class img-responsive all’immagine ……

   

e inoltre, ho aggiunto i seguenti codici CSS …….

 https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/#menubar-logo img { margin-top: 10px; margin-bottom: 20px; margin-right: 10px; } 

Se il mio codice risolve il tuo problema, è mio piacere …..

Non è necessario aggiungere altro CSS, poiché Bootstrap3 lo fornisce. A meno che tu non voglia aggiungerlo. Questo è il mio codice sul mettere il logo a sinistra e collegamenti a destra. Questa navigazione è retriggers. Apporta modifiche a ciò che ritieni opportuno.

HTML:

  
   

// Non ho dimenticato di aggiungere bootstrap all’inizio del tuo codice.