Header fisso durante lo scroll 
Autor: Carpenteria A.
Besucht 437,
Followers 2,
Geteilt 0
Buongiorno a tutti, vorrei attivare il menù dell'header fisso durante lo scroll, ho trovato un codice nelle discussioni ma me lo mette a sinistra ed è trasparente mentre io lo vorrei in centro con sfondo nero, come posso fare?
grazie mille per i vostri consigli
Gepostet am
perchè non usi la stiky bar ?
Autor
Perchè normalmete nell'anteprima si vede ma una volta pubblicato non si attiva e non si vede
Strano ma hai attivato la stiky a tutti i breakpoint?
Al limite metti il link del sito
Autor
ecco il link www.abisteel.it
cosa intendi come breakpoint?
ma funziona correttamente la stickybar
Autor
allora è un problema di visualizzazione del mio broswer
Autor
su chrome non funziona
prova ad aggiornare la cache con CTRL+F5 se migliora
io uso crome
.. quello che ti SEMBRA non funzionare è che alla risoluzioni inferiori a 1200 pixel il menu normale si trasforma un menu HAMBURGER...
...quindi ti basta regolare le impostazioni della stiky bar nelle risoluzioni/breakpoint inferiori
.
Autor
A posto ora si vede, a volte ci si perde in un bicchiere d'acqua, ho aggiornato, grazie ancora per l'aiuto
Prego figurati, sistema la stickybar alle risoluzioni inferiori.
Il funzionamento è regolare in apertura menù header e in discesa stiky bar ma se un domani tu volessi far diventare l'header fisso il codice è questo:
<style>
#imHeaderBg,
#imHeader,
#imMnMn {
position: fixed;
z-index: 10;
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
</style>
Ci devi mettere l'ombra:
<style>
/* ombra e bordo header fisso */
#imHeaderBg {
border-bottom: 0px solid rgb(139, 154, 166);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
</style>
Con questa situazione se non hai il blog OK ma se hai anche il blog non te la consiglio perche sullo scrool la parte destra della lista categorie del blog si sormonta all'header e da un pessimo risultato.
Se al contrario tu vuoi solo la styky bar fissa ti basta impostare l'header a zero e lavorare il menu solo sulla stiky bar.
Sulla stiky ci metti sempre l'ombra:
<style>
/* ombra e bordo sticky bar */
#imStickyBarContainer {
border-bottom: 1px solid rgb(139, 154, 166);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
</style>
Con questa soluzione funziona bene anche la barra di dx del blog che praticamente va sotto alla stiky bar.
Poi c'è anche la stiky bar con trasparenza e discesa con colore da te scelto ma questo è altra storia ed è un codice condiviso con la comunità fornito da Giuseppe Guida. Altre soluzioni le troverai in vari post che ci sono state date dalla nostra A.I. Kolasim
Autor
Roberto sei un grande! grazie mille
Consiglio: da sistemare a risoluzione inferiori.
Autor
Grazie Giancarlo, quella che risoluzione è? approfitto per chiederti come posso fare per far si che il menù non si modifichi in tutte le risoluzioni perchè se lo rimpicciolisco per le risoluzioni tipo da cellulare mi va a modificare anche nelle altre risoluzioni
Ciao in teoria per i device con schermo molto piccolo come i cellulati non devi fare comparire il menù con le scritte ma hamburger menù che risulta più leggibile nato appositamente per questi scopi.
Autor
Grazie Giancarlo
Consiglio: Quando si hanno parecchi menù anche se incomedia da ultimi aggiornamenti da la possibilità di cliccare sulla voce principale di menu e poi far vedere la tendina con hamburger , io l'ho sempre trovato scomodo e poco operativo sui cellulari. Da quello che vedo sul tuo sito non è il caso tuo ma così come disposto non va bene. A una certa risoluzione in fase di progetto quando vedi che il menù non sta più ne sull'header ne sulla stiky devi restringerlo fino a che non ti compaiono le lineette dell'hamburger menu e via via sistemarlo nei vari breack-point. Tuttavia vista la conformazione attuale del menù io avrei utilizzato l'oggetto owerlay menu che agisce in questo caso sui livelli e non sulle pagine. Come si fa? Si fa NUOVO LIVELLO gli si da il nome e lo fai puntare alla pagina che, in queto caso va nascosta. Esempio: Creo il livello IL NOSTRO STAFF. Nelle proprietà gli dico di puntare alla pagina nascosta il nostro staff e così dicasi per tutte le altre pagine - ..... crea Livello e puntamento a pagina nascosta ecc.... L'effetto nelle proprietà dell'Owerlay menu è molto più d'impatto che quello utilizzato dal menu offerto da incomedia ma ripeto quì è solo questione di gusti e progettazione personale. Volendo si può fare ricorso anche a codici esterni per avere dei menù impressionanti come effetti ma questo è altra storia.
Autor
Se ho ben capito creo livello, ad esempio "lo staff" lo faccio puntare alla pagina che nascondo "lo staff" così facendo posso modificare il menu della pagina "Lo staff" senza che venga modificata su tutte le altre pagine giusto?
Allora il funzionamento è molto semplice. Quanto da me detto sopra si riferisce solo al fatto se hai una pagina che nei contenuti ci spiega il tuo staf. Se tutte le altre pagine sono autonome quindi, non rimandano ad altre pagine in maniera massiccia, puoi utilizzare la procedura che ti ho descritto altrimenti se la pagina il tuo staf fa parte di un menù centralizzato di servizi, allora bisogna utilizzare un approccio diverso. Da un'analisi del tuo sito mi permetto di darti dei suggerimenti. Tutte le tue pagine portano ad una descrizione unica per ogni servizio quindi utilizzando come menù l'oggetto "menù owerlay" andrebbe meglio ma puoi sempre utilizzare il menù che hai restringendolo sul break point che ti risulta non contenere più un menù esteso. Dipende dal tuo gusto personale. Ammettiamo che tu prenda in considerazione di continuare ad utilizzare il tuo menu rimandando a dopo lo studio per un owerlay menu, non devi far altro che andare in MODELLO >> CONTENUTO DEL MODELLO e ti darà il tuo attuale HEADER così come l'hai creato. Qui non devi fare nulla se non sistemare per benino il menù in maniera tale che non esca dall'area di lavoro ma la vedo dura perchè sul menù conto 14 voci e, il fatto che tu abbia suddiviso il menù facendo scorrere sotto le restanti voci, mi porta a pensare che con il logo che hai dovrai partire per forza o con l'oggetto owerlay menu o restringendo il menù classico che stai utilizzando ora. Nel secondo caso, se allinenado orizzontalmente sull'header tutte le voci su un'unica riga noti che non ti entrano sull'header, prova a restringere il menù fino a che non ti compaiono tre barrette. Ecco a quel punto lavori sull'Hamburger menù quindi, per le sue proprietà, devi farci doppio click e su HAMBURGER regoli le proprietà,lo sfondo, posizione,comportamento ecc... ecc.... Fai analoga procedura sulla stiky bar e avrai un menù adattabile anche per cellulari. Per la stiky bar, se non vuoi ripetere la stessa procedura utilizzata per l'header, basta che fai un copia incolla del menù sistemato sull'header e lo incolli sulla stiky bar. Tuttavia se partire con una home che ci fa vedere subito un hamburger menù per te non andasse bene, considerate le 14 voci che hai non ti rimane altro che centralizzare i servizi parte o tutti in una unica pagina. Esempio: Certificazioni, approviggionamento,sviluppo,prelavorazione,lavori e lavorazioni unirle, officina,trattamento,saldatura e qualità, avrei fatto una sola pagina SERVIZI, con dei box che puntano alle pagine suddette che NON dovranno essere nascoste ma devono stare sotto il Livello. Al contrario creando la pagina servizi questa invece va nascosta e va messa prima delle pagine non nascoste e il livello SERVIZI creato deve puntare appunto alla pagina servizi nascosta. Cosa ottieni così facendo? Il menù classico si riduce sull'header permettendoti di allineare tutte le voci e non solo: permetterà al visitatore di vedere anche scendere il menù a tendina con le pagine non nascoste. Tuttavia, questa soluzione comporta - almeno per come mi regolo io - che, a scendere di risoluzione, e alla comparsa dell'hamburger menu classico, questi debba essere nascosto agendo sulla voce NON FAR VEDERE QUESTO MENù per questa risoluzione e per tutte le successive sostituituendolo con l'oggetto ► Overlay Menu.
Questo è un ESEMPIO fatto con un classico menu come quello tuo che, a scendere di risoluzione, viene nascosto e sostituito con l'oggetto Overlay Menu. Come potrai notare, inizialmente vedi il menù classico a tendina ma se, ad esempio, cliccki direttamente sulla voce servizi, ti porta alla pagina servizi da me nascosta e questo perchè? Perchè questo oggetto agisce solo sul livello. Restringendo il browser alla comparsa dell'hamburger menù vedrai che il pulsante servizi ti porta direttamente alla pagina service centralizzata. Esattamente come avrei fatto per il tuo sito. Infine ti suggerisco che nelle pagine di descrizione con sfondo riga bianco metterei un po di trasparenza senza estendere la riga come nell'ESEMPIO CHE SEGUE dove tra l'altro la moltitudine di tematiche mi ha indotto a regolarmi cone le procedure che ho descritto sopra. Buon lavoro.
Autor
Grazie mille per i preziosi consigli