WebSite X5Help Center

 
Frederic P.
Frederic P.
User

Come rendere visibile Hamburger con header altezza 0px  it

Auteur : Frederic P.
Visité 2312, Followers 1, Partagé 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

Posté le
23 RéPONSES - 2 UTILE - 1 CORRECT
Incomedia
Riccardo P.
Incomedia

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à.

Lire plus
Posté le de Riccardo P.
Frederic P.
Frederic P.
User
Auteur

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?

Lire plus
Posté le de Frederic P.
Frederic P.
Frederic P.
User
Auteur

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.

Lire plus
Posté le de Frederic P.
Incomedia
Riccardo P.
Incomedia

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.

Lire plus
Posté le de Riccardo P.
Frederic P.
Frederic P.
User
Auteur

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?

Lire plus
Posté le de Frederic P.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator


1) - sarà un difetto del mio PC+Ff...?... undecided ...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"...
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Frederic P.
Frederic P.
User
Auteur

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

Lire plus
Posté le de Frederic P.
Frederic P.
Frederic P.
User
Auteur

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

Lire plus
Posté le de Frederic P.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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...

.



Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Frederic P.
Frederic P.
User
Auteur

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

Lire plus
Posté le de Frederic P.
Frederic P.
Frederic P.
User
Auteur

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

Lire plus
Posté le de Frederic P.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Frederic P.
Frederic P.
User
Auteur

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)

Lire plus
Posté le de Frederic P.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Frederic P.
Frederic P.
User
Auteur

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.

Lire plus
Posté le de Frederic P.
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
Skeggia 12
Skeggia 12
Moderator

avete provato ad impostare un header di 2px e inserire logo e hamburger? certo non è semplice operare, ma funziona... e senza codici... screenshot...

Lire plus
Posté le de Skeggia 12
Skeggia 12
Skeggia 12
Moderator

così si capisce meglio... l'immagine sottostante è nella prima riga della pagina...

Lire plus
Posté le de Skeggia 12
Frederic P.
Frederic P.
User
Auteur

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.

Lire plus
Posté le de Frederic P.
Giancarlo B.
Giancarlo B.
User
Frederic P.
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

Lire plus
Posté le de Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User

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

Lire plus
Posté le de Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Frederic P.
Perdona KolAsim, credo di non essere stato sufficientemente chiaro, ... ...

... 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!)...cool... e quindi visto il risultato che hai già ottenuto,  come non detto; ... l'importante è ottenere il risultato desiderato, anche in extra (6° Step)...wink...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪