Anchor text con fixed header Css

Anchor text con fixed header Css
Freia

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