Gestire le ancore interne con il foglio di stile

Quando si crea un sito web onepage o una landing page spesso il menu contiene link che rimandano a specifiche sezioni della pagina stessa.

Questo rende molto facile la navigazione tra i contenuti ma spesso la visualizzazione non è sempre corretta, specie se il tema utilizza un menu sempre visibile (sticky menu) che copre parte della sezione. 

Per ovviare a questo è sufficiente aggiungere al proprio foglio di stile questo codice, sostituendo #id-content con il proprio riferimento id.

#id-content:before {
    content:"";
    display:block;
    height:90px;
    margin:-90px 0 0;
}

Questo snippet di codice CSS utilizza la pseudo classe :before per definire che prima del blocco a cui farà riferimento la nostra ancora interna ci sarà uno pseudo blocco alto 90px con margin-top negativo. Ciò permette di posizionare correttamente il nostro blocco in caso di menu sempre visibile.

Un esempio è la nostra pagina Linguaggi.
Questa pagina presenta più row, ciascuna riportante uno specifico linguaggio.
Cliccando sulle singole icone dei linguaggi dalla nostra Homepage sulla specifica row visualizzerai la sezione della nostra pagina di esempio.

Il layout dell'intero sito web di Sumorize ha menu top sempre visibile con altezza fissa a 60px. Il nostro snippet di codice CSS impone 90px e quindi mostra sempre il contenuto che verrebbe altresì mascherato.