Come rendere visibile Hamburger con header altezza 0px
Autor: Frederic P.
Visited 2371,
Followers 1,
Udostępniony 0
Vorrei realizzare con la versione 17 quanto segue:
Un header costituito da logo aziendale e menù hamburger a lato in alto alla pagina web in tutte le risoluzioni con un oggetto di fondo che dovrebbe essere il contenuto della pagina web.
ho effettuato il test pubblicato qui : http://www.ranieri-international.com/2018/voyager-18-s.html
Il problema è che una volta posizionati logo e menù hamburger nelle varie risoluzioni, per ottenere l'effetto voluto dovrei azzerare l'altezza dell'Header, solo che facendo cos' il logo rimane comunque visibile mentre il menù hamburger diventa invisibile.
Potreste aiutarmi? E' una cosa urgente
Grazie
Posted on the
Buongiorno Federic,
gli oggetti logo e menu li puoi inserire nella header del sito e lasciarla trasparente così da poter gestire gli oggetti al passo 1 in Contenuto del Modello e sempre in questa sezione puoi spostare e ridimensionare gli oggetti per ogni breakpoint.
Fammi sapere se hai difficoltà.
Autor
Buogniorno, grazie Riccardo, ma non è la soluzione che cerco.
Mettendo nell'header al passo 1 un'immagine o una slide sarà visibile in tutte le pagine del sito, invece a me serve che in ogni pagina che visito partendo da 0px in alto ci sia l'oggetto della prima riga con in sovraimpressione il logo e l'hamburger menù. Hai una soluzione, o voi dello staff sapreste come aiutarmi?
Autor
Ho appena pubblicato http://www.ranieri-international.com/2018/voyager-18-s.html, ora potrebbe dare l'idea di ciò di cui ho bisogno. Il problema è che ho portato l'header a 5px per il breakpoint alla massima risoluzione, e quindi si nota un distacco di 5 px dal margine superiore della finestra del browser, mentre in tutte le altre risoluzioni l'ho settato a 0px.
L'altro inconveniente di mettere a 0px l'header è che non posso spostare ne il logo e ne l'hamburger menù in verticale nella posizione che vorrei ma li posso spostare solo in orizzontale.
Buongiorno Frederic,
nel tuo caso si potrebbe operare in un modo diverso. Setta pure l'header a 0px e non inserire nulla in header.
Poi al passo 4 nelle pagine utilizzerai la prima riga come header così da inserire menu e log, dovrai farlo in tutte le pagine o in quelle che vuoi. Praticamente andrai a costruire la header nella pagina al passo 4.
Autor
Buongiorno Riccardo, il problema rimarrebbe comunque. La mia necessità è mettere uno slider o un'immagine in alto che si adatti in larghezza alla finestra del browser come nell'esempio già indicato http://www.ranieri-international.com/2018/voyager-18-s.html
Inserendo il menù in ogni pagina avrei sempre lo stesso problema, come posso inserire menù hamburger e logo con lo sfondo di un'immagine o una slider che si adatti alla finestra del browser in orizzontale e renda visibile l'intera foto in verticale?
1) - sarà un difetto del mio PC+Ff...?... ...al link segnalato vedo che l'immagine non viene ridimensionata, e si crea lo scroll orizzontale...!... ... (stranamente vedo in modo corretto sull'obsoleto PC+Ch.49! Ed OK sui disp. “mobile”)..
... riguardo alla richiesta, per immagine o slidershow che sia:
2) - ... l'immagine deve prendere tutta la finestra W/H col metodo "cover"...?...
3) - ... l'immagine deve prendere solo tutta la larghezza della finestra col metodo "cover", ed altezza fissa definita da quella della RIGA...?...
3) - ... oppure l'immagine deve prendere solo tutta la larghezza della finestra col metodo tradizionale, o normale, resize/ratio(*)...?...
(*) ... come è ora sui disp. "mobile"...
.
Autor
Praticamente mi serve una cosa del tipo http://it.azimutyachts.com/ ho la necessità di avere il logo e l'hamburger menù in alto dove decido di posizionarli, ma che sullo sfondo abbiano il contenuto la primo elemento della pagina del sito che apro
Autor
Per gli elementi che non si vedono correttamente ho notato che aprendo la pagina web pubblicata in website x5 V17 con browser IE 8, IE 9, Safari 5.1.7, Chrome 49.0.2623.112, in alcuni casi compare l'header ed uno spazio in altezza di 500 / 600 px vuoto e poi la pagina a seguire, ma la cosa più strana è che lo stickybar che compare allo scroll della pagina il logo compare di dimensioni enormi al centro seguito sotto dal menu responsive
... attendi quello che ti diranno gli esperti...
... quindi pare il punto 3)...
... secondo me! potresti ottenere un buon effetto con la normale galleria del programma, oppure con il le schede del testo della v.17_PRO, come si vede qui: https://www.websitex5.com/it/
... altrimenti, sempre secondo me, potresti rimediare ricorrendo ed integrando strumenti extra, e/o script di controllo extra...
.
Autor
Ok, grazie per il consiglio, comunque ho notato che anche il sito https://www.websitex5.com/it/ aperto con IE 9 da problemi di visualizzazione
Sto cercando un codice extra che possa permettere alle pagine indipendentemente dal header (che setterei con sfondo trasparente) di posizionarle in alto partendo da 0px
Gradirei qualche indicazione in merito, grazie
Vedi se ti è utile, questo è un vecchio esperimento fatto con il codice di KolAsim
https://giancarlob.altervista.org/test-vari/header-trasparente/
trovi le indicazioni sul test.
Ciao.
Autor
Grazie per il suggerimento ho utilizzato questo codice in passato per questo sito www.lombardoserramenti.it fatto con la versione 13 di website. Volevo un qualcosa che fosse meno legato a codici esterni
... io non ho il programma, ...ma penso che, se non andasse bene quanto proposto, potresti usare lo stile della riga | Elenco immagini
... ma, se la situazione è quella che conosco, penso che l'altezza della riga sia fissa, e nel caso e se interessasse, ...occorrerebbe sempre un controllo JS extra per il resize-ratio della stessa rispetto al Elenco immagini
.
Autor
Grazie KolAsim, avevo già pensato a questa soluzione ma non va bene perchè il problema è l'header. Ho provato anche ad azzerare l'header ed impostare lo stickybar in ogni pagina con stile riga Elenco immagini, ma l'altezza dello stickybar rimane fisso ad un'altezza pre-stabilita (impostando per esempio margine esterno in stile della riga a 250px max dal bordo inferiore) e non si riduce in automatico con lo scalare della foto (foto dello stile riga impostato come adatta alla finestra ed estendi alla larghezza della finestra del browser)
... si può per caso fare, per esempio, il menu dentro l'header, e questo alto solo 80 px...?...
... e quindi immediatamente sotto, ...nella prima riga applicare la lista immagini ...?...
... se sì, prova a fare un semplice esempio con la v.17, ed una lista immagini con un paio di immagini leggere, senza parallasse e nè effetti speciali, ed a seguire una riga con semplice testo per verificare il comportamento generale...
.
Autor
Perdona KolAsim, credo di non essere stato sufficientemente chiaro, mi serve che per ogni modello di barca che apro ci sia la foto o uno slide di 2/3 foto in alto a bordo pagina con in sovra impressione il logo aziendale ed il menù, tanto per essere più chiari ti elenco qui di seguito il link di tre differenti pagine di un cantiere navale
http://it.azimutyachts.com/azimutgrande25metri.html
http://it.azimutyachts.com/azimutgrande27metri.html
http://it.azimutyachts.com/azimutverve40.html
Questo è più o meno la partenza di base da cui vorrei partire.
Aspetto qualche soluzione, purtroppo ho pochissimo tempo per tentare di realizzare il tutto prima dell'apertura del Salone Nautico di Parigi l'8 dicembre prossimo.
Stavo lavorando proprio nei giorni scorsi ad una cosa del genere, un minimo di codice (ma davvero pochissime righe) devi inserirlo per ottenere quello che vuoi tu. Io ho inserito logo e menù in header e "sotto" l'header parte la lista con le immagini che scorrono nello stile righe del primo oggetto posizionato nella pagina. Le pochissime righe di codice servono per portare "sotto" l'header il primo oggetto (posizionato all'interno della pagina) contenente la lista di immagini scorrevoli. Se inserisci nella pagina menù ed header come consigliato da Riccardo sarebbe comunque una soluzione, l'unico piccolo inconveniente (ma a mio avviso di poco conto) è che se sono tante pagine nel sito devi duplicare più volte la pagina contenente menù e logo per ottenere in ogni pagina del sito quel pseudo-header in alto... Ma basterebbe fare un copia e incolla della pagina master con logo ed header per creare ogni nuova pagina del sito e uniformare il tutto.
Qui comuqnue il sito al quale sto lavorando in cui ho realizzato quel che tu chiedi (se non ho capito male):
http://www.bozzasito001.altervista.org/agenziaeventi001/
quel po' di codice utilizzato è visibile con Ctrl+Maiusc+I
Ciao
avete provato ad impostare un header di 2px e inserire logo e hamburger? certo non è semplice operare, ma funziona... e senza codici... screenshot...
così si capisce meglio... l'immagine sottostante è nella prima riga della pagina...
Autor
Giuseppe Guida,grazie è esattamente quello che mi serve, mi copieresti il codice da inserire qui gentilmente?
Skeggia 12, grazie per la soluzione prospettata, ma l'ho già provata, il problema è che così facendo non puoi posizionare l'hamburger menù o il logo all'atezza che vuoi, se volessi distanziarli di 10 px dall'alto o a 20px dal bordo superiore, non lo puoi fare.
quel po' di codice utilizzato è visibile con Ctrl+Maiusc+I
Frederic P., contattami in privato, ti mando progetto alleggerito dal quale vedere come fare.
mia mail: guidagiuseppe70(@)gmail.com
N.B. togli le parentesi tonde prima e dopo la @, se non le metto poi l'indirizzo mail viene oscurata qui sull'Help Center.
Ciao
... le mie domande e le prove che ti avevo chiesto di fare (io non ho il programma!) erano relative al risultato da ottenere proprio rispetto ai link di esempio che hai postato, (!vedi esempio di Giancarlo!)...... e quindi visto il risultato che hai già ottenuto, come non detto; ... l'importante è ottenere il risultato desiderato, anche in extra (6° Step)......
.