Autore Topic: Helix Ultimate: layout del menu che si rovina cambiando la risoluzione  (Letto 190 volte)

Offline Eiasu

  • Nuovo arrivato
  • *
  • Post: 29
    • Mostra profilo
Ciao a tutti,non riesco a trovare soluzioni soddisfacenti per il layout di un sito realizzato su Helix Ultimate editanto le pagine con SP Page Builder.
Sto lavorando su questo sito internet su aruba Linux Basic.Ho un header layout di tre colonne 3+7+2 logo, menu e language switcher, che si visualizza corretamente su desktop ma, quando si restringe la visualizzazione il pulsante del menu offcanvas compare una riga sotto l'header, fuori dal campo colorato del background, la bandierina del language switcher si posiziona ancora più in basso, sovrapponendosi ai contenuti.Ho impostato header sticky nelle opzioni di layout di Helix, però non riesco a far restare logo, language switcher e menu, tutto nella stessa riga, o almeno in cima alla pagina con il colore di background che permetta di visualizzare correttamente i pulsanti.Grazie sempre a tutti, e scusate ai moderatori per gli errori di gioventùCiaoEiasu

Offline Limma

  • Abituale
  • ****
  • Post: 886
  • Sesso: Maschio
    • Mostra profilo
Hai creato tu l'header con le tre posizioni logo, menu e lingue, giusto?
In ogni caso devi provare a settare il comportamento responsive di ogni sezione alla voce "grid" del menu attivabile dalla "rotellina" su ciascuna delle tre sezioni in cui hai diviso l'header.

Offline Eiasu

  • Nuovo arrivato
  • *
  • Post: 29
    • Mostra profilo
Grazie per la risposta,
Hai creato tu l'header con le tre posizioni logo, menu e lingue, giusto?
sì l'ho creato io, ho disabilitato l'uso del default header, ho creato una nuova riga e l'ho rinominata "header"
Citazione
In ogni caso devi provare a settare il comportamento responsive di ogni sezione alla voce "grid" del menu attivabile dalla "rotellina" su ciascuna delle tre sezioni in cui hai diviso l'header.
Ho provato tutte le combinazioni, come si vede dallo screenshot, però non sono riuscito a fissare il menu.Nello screenshot ho messo i settaggi che sto provando, sto modificando la sezione giusta?
Ho trovato un suggerimento su questo forum e aggiungendo questo codice CSS:
Codice: [Seleziona]
@media only screen and (max-width: 800px) {
  a#offcanvas-toggler {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-right: 15px !important;
  }
}
in questo modo sono riuscito a bloccare la posizione dell'icona per abilitare il menu offcanvas, se potessi bloccare allo stesso modo anche il menu, avrei risolto il problema.grazieciao


Offline Limma

  • Abituale
  • ****
  • Post: 886
  • Sesso: Maschio
    • Mostra profilo
Devi provare diverse combinazioni della griglia sulle altre visualizzazioni.
Parti da quella per smartphone cambiando la griglia finché tutte tre le sezioni si allineano.
Direi che quella del logo va di sicuro ridimensionata perché da smartphone in modalità portrait mi pare troppo larga...

Offline Eiasu

  • Nuovo arrivato
  • *
  • Post: 29
    • Mostra profilo
Devi provare diverse combinazioni della griglia sulle altre visualizzazioni.
Parti da quella per smartphone cambiando la griglia finché tutte tre le sezioni si allineano.
Direi che quella del logo va di sicuro ridimensionata perché da smartphone in modalità portrait mi pare troppo larga...
Ok ci sto provando ed ho trovato per alcune risoluzioni la soluzione che cercavo.Però sto provando a caso le varie combinazioni dei grid col-xl-1, col-sm-5, ma non ho capito che effetti hanno questi valori, ho cercato anche sulla documentazione e sul forum joomshaper ma non ho trovato spiegazione, tu sai cosa sono questi settaggi?

Offline Limma

  • Abituale
  • ****
  • Post: 886
  • Sesso: Maschio
    • Mostra profilo
La griglia è quella di Bootstrap 4 sul quale è basato il framework di Helix Ultimate.
Dai un'occhiata alla documentazione di Bootstrap, tipo qui.

Offline Eiasu

  • Nuovo arrivato
  • *
  • Post: 29
    • Mostra profilo
La griglia è quella di Bootstrap 4 sul quale è basato il framework di Helix Ultimate.
Dai un'occhiata alla documentazione di Bootstrap, tipo qui.
Grazie tante per la pazienza,è un ottimo link, grazie.Me lo sto studiano e sperimentando, spero di trovare la soluzione giusta per tutte le risoluzioni

Offline Federico Migliorini

  • Nuovo arrivato
  • *
  • Post: 1
    • Mostra profilo
Io ho risolto andando a cambiare nel sotto menù i parametri per mobile tablet etc. mantenendo sempre la suddivisione. ad esempio io ho impostato 3+9 son andato su mobile ho messo col-3 e col-9.

Offline Eiasu

  • Nuovo arrivato
  • *
  • Post: 29
    • Mostra profilo
Io ho risolto andando a cambiare nel sotto menù i parametri per mobile tablet etc. mantenendo sempre la suddivisione. ad esempio io ho impostato 3+9 son andato su mobile ho messo col-3 e col-9.
Grazie ma a me purtroppo a me non funziona così,ho provato a settare le colonne dell'header personalizzato 2+9+1 Logo, Menu e Language Switchere ho messo 2,9 e 1 in tutti i sotto menu grid per tutte le risoluzioni ma non ridimensiona in modo esteticamente carino: linkSto pensando di fare l'header con solo il menu, senza logo e language switcher, forse è più facile, anche se sarebbe stato carino avere lo sticking header con tutti e tre le colonne


 

Torna su