WebSite X5Help Center

 
Ettore P.
Ettore P.
User

Codice per stikybar sempre presente  it

Auteur : Ettore P.
Visité 1188, Followers 2, Partagé 0  

Ciao, esperimento:

Codice per Stikybar sempre presente?

Versione 13 evolution.

Grazie mille.

Posté le
11 RéPONSES - 1 UTILES - 1 CORRECT
Giancarlo B.
Giancarlo B.
User

se vuoi fissare header menù se si prova con questi...

/* header e menu fissi */
#imHeaderBg, #imHeader {
position: fixed;
z-index: 10;
top:0;
}

#imHeader {
width:1000px;
z-index: 11;
}

Lire plus
Posté le de Giancarlo B.
Ettore P.
Ettore P.
User
Auteur

Grazie a tutti, il problema è che ho già un'immagine fissa a tutta pagina come header-background ed un'altra immagine png centrale fissa nell'header (anche l'header è a tutta pagina).

Mi piacerebbe avere una bar al top (tipo quella verde del template gusto, senza menu perchè il menu si trova nell'hamburger extra, width 100% e alta circa 50px fissa in modo da rendere meglio visibile l'hamburger menu extra (fino all'arrivo della stikybar che compare dopo lo scroll)

Posso fare anche senza, ma mi piacerebbe sperimentare l'effetto per poi decidere se vale la pena usarlo oppure no.

Grazie ancora.

Lire plus
Posté le de Ettore P.
Mirko Boschetti
Mirko Boschetti
Moderator

nel Template Gusto di Giancarlo, l'immagine è una sola, messa come sfondo header.....wink

Lire plus
Posté le de Mirko Boschetti
Ettore P.
Ettore P.
User
Auteur

Si Mirko, ed è impostata come sfondo dell'header. Io ho già un'immagine a tutta pagina come sfondo header, mi servirebbe uno sfondo header bis con z-index superiore a quello dello sfondo header principale.

Preferisco utilizzare la mia immagine principale (quella del paesaggio viola) come sfondo-header anzichè come sfondo-pagina e mantenere il logo (la E bianca) come immagine nell'header.

Ricapitolando, a quanto detto sopra, dovrei quindi aggiungere una ulteriore barra bianca fin da subito (quello che fa la stikybar dopo lo scroll) di livello superiore all' header ma di livello inferiore all'hamburger menu extra.

Lire plus
Posté le de Ettore P.
Giancarlo B.
Giancarlo B.
User

Non ho capito bene il perché  dell'immagine  nel header così grande....  a parte questo, non puoi inserire la barra bianca nella stessa immargine ?

Lire plus
Posté le de Giancarlo B.
Ettore P.
Ettore P.
User
Auteur

Ciao Giancarlo, sì, posso inserire la barra nell'immagine con gimp, perchè no? Non ci avevo pensato. 

Preferisco l'immagine nello sfondo header perchè la controllo meglio nelle varie risoluzioni.

Ne approfitto per un chiarimento: 

1) Se inserisco una immagine in una riga come parallasse o come sfondo pagina,  immagine di 1920*700, opzione "non ripetere" e allineata al top , cosa succede se visualizzata in un monitor con risoluzione superiore? Viene adattata a tutta la larghezza anche se risulterà più sgranata, giusto?  

Lire plus
Posté le de Ettore P.
Giancarlo B.
Giancarlo B.
User

Ettore lo puoi vedere tu stesso stringendo il browser in larghezze. .. per il parallasse esistono diverse opzioni per lo sfondo pagina non si adatta ma parde la zole laterali ... comunque come detto sopra puoi simulare e valutare stringendo con il cursore del mouse il browser.

Lire plus
Posté le de Giancarlo B.
Ettore P.
Ettore P.
User
Auteur

Giancarlo, stringo sempre il browser per visualizzare la resa a risoluzioni inferiori, ma sto lavorando su un laptop di 1366*768 e non riesco a vedere come si comorti il responsive oltre tale risoluzione.

Quindi il parallasse perde le zone laterali... se imposto "adatta alla pagina" e la pagina è molto alta, mi si ingrandisce esageratamente l'immagine inserita, quindi non riesco a utilizzarlo. Potrei creare un gradiente a sfumare nelle fasce laterali esterne, vedrò :)

Comunque, dai... ho già tutte le info che mi servivano, ti ringrazio ancora.

Lire plus
Posté le de Ettore P.
Giancarlo B.
Giancarlo B.
User

Se vuoi vedere oltre la tua risoluzione puoi simulare dal browser con Ctrl - e Ctrl  +

Lire plus
Posté le de Giancarlo B.
Ettore P.
Ettore P.
User
Auteur

A volte sfuggono le cose più banali ;) Grazie mille, Giancarlo.

Lire plus
Posté le de Ettore P.