Anchor text con fixed header Css

Anchor text con fixed header Css

Nella guida utile di oggi vediamo come posizionare al meglio gli anchor text con un header fixed andando a impostare un giusto offset.

Molto spesso questo problema capita a chi ha un header fixed allo scorrimento della pagina,quando si una un’ancora di fatto non si tiene conto dell’altezza dell’header e pertanto l’effetto di “posizionamento” sparisce.

Per ovviare a questo inconveniente potete aggiungere la seguente classe al vostro css:

.ancora{
  padding-top: 60px !important; /*60 è l'altezza dell'header*/
  margin-top: -60px !important; /*60 è l'altezza dell'header*/
}

Una volta aggiunta, vi basterà andare a specificare nel punto di ancoraggio la classe in questo modo:

<a href="#test">Vai al test</a>
[...]
<h3 id="test" class="ancora"> Test </h3>

Una volta fatto dovrebbe funzionare tutto correttamente senza creare problemi di layout con il resto, e senza usare nemmeno una riga di codice js.

Questo articolo ti è stato utile? Clicca su commenta qui sotto e lasciami il tuo feedback!

Image credits “javascript” disponibile su shutterstock

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

laravel-guida-italiano
Up Next:

Come creare facades personalizzate in Laravel 5

Come creare facades personalizzate in Laravel 5