Header fisso 
Author: Franco F.
Visited 170,
Followers 2,
Shared 0
Buongiorno a tutti. Ho acquistato questo software da pochi giorni e per la verità credevo fosse veramente Wysiwyg. Probabilmente ho sbagliato. Esiste un modo per far si che l'header resti fisso ed occupi tutta la larghezza dello schermo con il menu ed il logo e non scivoli come mi capita impostando la sticky bar ? Dove posso trovare pubblicazioni / manuali, anche in libreria che spieghino veramente passo passo l'utilizzo del programma alla maniera learning by doing.
Grazie
Posted on the
Ciao trovi tutto sulla guida oppure degli esempi su QUESTO SPAZIO CLIKKA
Author
Grazie Roberto, molto utile credo che vi disturberò ancora
... se lavori correttamente non è difficile, e per questo scopo non ti servirebbero codici EXTRA...
... come puoi vedere in questi semplici esempi tra quelli presenti nel Marketplace:
1) - Sticky Bar > fissa
https://market.websitex5.com/it/template/anteprima/12053cb5-e072-4cd2-912f-2341c259df0
2) -Sticky Bar > fluttuante
https://market.websitex5.com/it/template/anteprima/756928f1-2d38-4109-a3d7-1c2e37ab84b
... l'intestazione non deve essere invasiva, e nel caso lo fosse è sempre meglio accoppiare la StickyBar in formato minimale, introdotta diverso tempo fa a grande richiesta...
... solo se l'intestazione o HEADER fosse invasiva e solo se la si volesse rendere fissa, allora si potrebbe accoppiare una mia invenzione EXTRA di una quindicina di anni fa, quella del mio DIV_CUSTOM fluttuante condizionato, che potrebbe essere applicato a qualsiasi oggetto, quindi anche all'HEADER...
... comunque se ti interessasse e per poter eventualmente valutare dovresti postare il LINK di un tuo esempio online...
.
ciao
.
Ok per l'header ma se proprio devi mantenere fisso un menù di testa scegli la stikybar che da meno problemi. L'header fisso con quel codice va bene solo se non hai un blog. Utilizzando la classe della stiky il codice è identico a quello del "#ImHeader".
Author
Innanzitutto grazie ad entrambi (Roberto M. e KolAsim) per la rapida disponibilità. In realtà, per rispondere a KolAsim non so se lavoro correttamente anzi credo quasi certamente di no. Il link di Roberto mi è stato certamente utile. Ho acquistato questo Software da pochissimi giorni ed è la prima volta che creo un sito web. Ho sempre fatto il sistemista di base ed ho il senso estetico di un coccodrillo quindi ogni vostro consiglio è accolto con grande piacere. Devo rinnovare un sito per un albergo in Costiera Amalfitana e dando un'occhiata su alcuni siti già esistenti ho notato che l'header è quasi sempre fissa. Volendo usare la sticky bar ho visto che però si attiva solo allo scrolling creando un effetto slider secondo me poco gradevole. Volevo poi regolarne l'opacità rendendola trasparente ma non so come fare. Grazie ancora per la disponibilità e la pazienza.
dovrebbe bastare aggiungere codice questo all'header fisso di Roberto, per dare una trasparenza in rgb ora è impostato colore nero 0,0,0
#imHeaderBg {
background-color: rgba(0, 0, 0, 0.6) !important; /* Il valore 0.6 indica il 60% di opacità */ }
-> [1] -> [2] ... quando conoscerai bene il Programma, non avrai problemi...
-> [3] ... normalmente le opzioni disponibili al Passo_2 dovrebbero soddisfare la maggior parte delle esigenze...
... in casi estremi e/o per far prima si può applicare del codice EXTRA, ma dipende da caso a caso e devi anche conoscere le sezioni "Esperto" disponibili; una volta fatto per la prima volta poi per te non sarà più un problema...
... hai notato le differenze di HEADER nei due LINK che ti ho postato come esempio...?...
... tutti e due mi sembrano validi rispetto al tema della tua richiesta, magari spiega cosa secondo te andrebbe regolato in modo diverso, tanto per capire...
... come ti avevo detto prima, se tu posti il LINK delle prove del tuo esempio online potrei fare delle valutazioni concrete...
.
ciao
.
Author
Buongiorno Giancarlo, grazie innanzitutto
Non so se ho fatto bene e soprattutto dove ho collocato il codice perchè sembra che l'opacità dell'header rimanga uguale...
Author
Buongiorno KolAsim e grazie sempre
si e dei due quello con gli animali mi sembra più rispondente. Quanto a postare il link del mio esempio non ho idea di come farlo perchè non l'ho ancora pubblicato. Posso darti uno screen o se preferisci trovo il file *.html e lo giro...
Grazie
Questo è il codice per rendere fissa la sticky bar:
<style>
#imStickyBarContainer {
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 9999 !important;
}
</style>
Per avere la trasparenza non è necessario alcun codice perchè puoi mettere la trasparenza nelle opzioni del modello sticky bar.
Però ti dico subito che sbagli. La stiky bar va messa in trasparenza all'apparire ma quando scrolli deve avere colore altrimenti si impiccia il menu con i testi di contenuto. UN ESEMPIO DI ALCUNI LUSTI ANNI DEI MIEI PRIMI TEMPLATE .
Per lo scrool e il relativo colore da dargli c'è questo codice sviluppato da un utente del forum:
VA MESSO IN AVANZATE CODICE STATISTICHE
==============
<style>
/* credit by Giuseppe Guida */
#imStickyBarGraphics {
transition: 1s!important;
}
#imStickyBarContainer {
transition: 1s!important;
}
#imStickyBarGraphics.myStickyBar {
background: rgba(8, 69, 126, 1) !important;
opacity: 1 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#cookie-law-message .imCloseInn {
font-size: 18px !important;
display: inline-block;
padding: 15px 50px !important;
}
</style>
<script>
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#imStickyBarGraphics').addClass('myStickyBar');
} else {
$('#imStickyBarGraphics').removeClass('myStickyBar');
}
});
</script>
===============
Il colore puoi cambiarlo a secondo di quello che ti serve su quasta riga: background: rgba(8, 69, 126, 1) !important;
Ti suggerisco di farti un giro a 360 gradi su questo sito di massaima fatto per operatori addentrati ma qualcosa di semplice puoi sempre trovarlo CLIKKAMI
In alternativa o semplicemente per acchiappare altre idee CLIKKA INVECE QUI
Hai tutto a portata di mano......
Author
Grazie Roberto, terrò molto ben presente le tuoe dritte. Ho provato il codice e va benissimo. Utilissimi anche i siti che mi hai linkato.... molto validi.
Grazie veramente
... OK, ottima scelta, ... quindi non serve nessun codice...
... per ottenere quello stesso effetto, al Passo_2 | Struttura del modello | Sezione della Pagina > nel select seleziona HEADER, ad eaasgni il valore "0" nelle finestre Altezza...
(... prima di fare quanto detto, e solo se vuoi farlo , sempre nel Passo2 | Contenuto del Modello, puoi eliminare gli oggetti presenti... )
...riguardo ai Test online, è la prima cosa che devi imparare a fare e su cui devi essere sicuro...
... con il Programma ti è stato assegnato un hosting gratuito per un anno, quindi ti basta andare al Passo_5 ed avviare "Esporta il Sito su Internet", ed una volta esportato da lì stesso puoi controllare la pagina online, e nel caso quel URL lo pubblichi qui nel Topic per eventuali chiarimenti, in modo che si possa controllare l'avanzamento dei lavori ed eventuali problemi...
.
ciao
.
Author
Grazie Kolasim. grazie veramente. Si sono al corrente dell'Hosting gratuito ma vorrei appoggiarmi ad un altro fornitore per avere un dominio personalizzato (forse Aruba).
Grazie ancora
... OK ... ma se lo provi non c'è nessun problema, ed intanto prendi confidenza... ciao e buon lavoro...