Codice per stikybar sempre presente
Autor: Ettore P.
Besucht 1189,
Followers 2,
Geteilt 0
Ciao, esperimento:
Codice per Stikybar sempre presente?
Versione 13 evolution.
Grazie mille.
Gepostet am
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;
}
Qui trovi qualche spunto
http://essedi.altervista.org/_EVO13/_menufisso/index.html
Il sito non è responsive
Autor
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.
nel Template Gusto di Giancarlo, l'immagine è una sola, messa come sfondo header.....
Autor
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.
Non ho capito bene il perché dell'immagine nel header così grande.... a parte questo, non puoi inserire la barra bianca nella stessa immargine ?
Autor
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?
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.
Autor
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.
Se vuoi vedere oltre la tua risoluzione puoi simulare dal browser con Ctrl - e Ctrl +
Autor
A volte sfuggono le cose più banali ;) Grazie mille, Giancarlo.