Bootstrap - navbar-fixed-top copre il contenuto

Ho una domanda su navbar-fixed-top. Bene, ho un problema semplice con questo. La mia barra di navigazione fissa copre il contenuto, ad esempio nella pagina "Chi siamo", copre la riga con il titolo "Chi siamo".Bootstrap - navbar-fixed-top copre il contenuto

Non ho idea di come posso risolvere il problema, perché quando ridimensiono il sito Web (dimensioni dei dispositivi mobili) l'intestazione è visibile.

Ovviamente ho questo tipo di problemi con le intestazioni in altre pagine (Full Width e 404).

Inoltre, nella pagina dell'indice, copre alcuni dei cursori del carosello.

Informazioni:

sito: http://testerix.site90.com/index.html
bootstrap 2.3.2

Fammi sapere, come posso risolvere il problema su tutte le risoluzioni.

fonte

2013-11-02 testerius

Beh, nessuno sa come risolvere il problema? – testerius

ci sono diverse copie di questo problema http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site dice aggiungere questo css: body {padding-top: 40px; } @media screen e (max-width: 768px) { body {padding-top: 0px; } } ____________________________________________________________________ http: // StackOverflow.it/questions/10336194/twitter-bootstrap-top-nav-barra-blocco-top-content-of-the-page questo ha funzionato per me: Per bootstrap 3, navbar-static-top invece di fixed previene questo problema, a meno che non sia necessario che la barra di navigazione sia sempre visibile –

la risposta è nella pagina:

Twitter Bootstrap - top nav bar blocking top content of the page

Aggiungi alla tua CSS:

body { 
    padding-top: 65px; 
}

o una soluzione più complessa, ma reattivo, se la vostra barra di navigazione modificare l'altezza (ex in compresse appare in più a 60px o è diverso) usa una soluzione mista con css e javascript

CSS:

#godown{ 
    height: 60px; 
}

HTML (Resumen)

<body> 
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu"> 
... 

</nav> 

<!-- This div make the magic :) --> 

<div class="godown-60" id="godown"></div> 

<!-- the rest of your site --> 
...

JavaScript:

<script> 
//insert this in your jquery 
//control the resizing of menu and go down the content in the correct position 

    $("#navMenu").resize(function() { 
     $('#godown').height($("#navMenu").height() + 10); 
    }); 

    if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10); 

</script>

fonte

2014-08-26 05:41:51 Pablote

Ha funzionato per me, ma si sente così hacky. –

grazie! Esso funziona magicamente! – dotslash

Prova class = "navbar-static-top". Permette comunque alla barra di navigazione di rimanere in alto ma non blocca il contenuto.

fonte

2014-09-23 22:58:40

Sì ma arresta l'effetto sticky, quindi quando si scorre verso il basso si perde la barra di navigazione. – rory

-1

farei questo:

// add appropriate media query if required to target mobile nav only 
.nav { overflow-y: hidden !important }

Questo dovrebbe assicurarsi che il blocco di navigazione non si allunga downpage e copre il contenuto della pagina.

fonte

2015-04-30 18:30:33 developer10

Questo suggerimento non ha funzionato davvero. – Harlin

Davvero non una correzione. I blocchi Nav cambiano. Non vuoi fermarlo. – RichieHH

Bootstrap - navbar-fixed-top copre il contenuto

risposta

Problemi correlati