Joomla.it Forum

Joomla! 4 => Joomla! 4.x => Topic aperto da: fracm - 01 Nov 2021, 18:17:53

Titolo: Menu in top right accanto al logo Cassiopeia
Inserito da: fracm - 01 Nov 2021, 18:17:53
Ciao ragazzi,sto migrando alcuni siti web di alcuni clienti.Ma ho un grande problema dal quale non ne esco.Ho bisogno di mettere il menu in posizione accanto al logo in top right per intenderci.In giro per il web vedo che molti hanno fatto così ma io non riesco e il mio menu rimane sotto al logo :-(
C'è modo di farlo semplicemente o devo andare a modificare l'index.php?
Grazie mille


Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: xplosion - 02 Nov 2021, 09:21:46
In pratica non c'è una posizione accanto al logo, il menu viene sempre sotto.
Dovresti modificare i CSS per fare quello che ti serve, oppure utilizzare un template alternativo che lo permette, tipo NATURE (https://j4.dr-menzel-it.de/).
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: fracm - 02 Nov 2021, 16:37:45
Grazie mille Xplosion.Ho guardato il template Nature sarebbe stato perfetto.Ma in questo sito ho tutti gli articoli con le colonne boostrap e non me le legge Cassiopeia si (non posso cambiare tutto).Posso chiedere a te o qualcuno di dirmi come ha risolto con i css?Grazie mille :)
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: fracm - 06 Nov 2021, 13:32:17
Ciao ragazzi, qualcuno sa come mettere il menu in float right rispetto al logo nel template Cassiopea con i css o con modifica del php.Vorrei mantenere quello come template.Ma ho bisogno di mettere il menu in alto a destra.Grazie mille :-)
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: Limma - 06 Nov 2021, 20:10:22
Vedi un po' con queste due regolette css:
Codice: [Seleziona]
.container-header {
    display: flex;
}
Codice: [Seleziona]
.container-header .container-nav {
    justify-content: flex-end;
}
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: fracm - 09 Nov 2021, 10:20:31
Ciao, grazie mille...ma no...non funziona...Stavo provando a mettere la classe col al brand img e al menu e funziona ma poi impazzisce un pò il menu in mobile...provo a lavorare sui css..
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: Limma - 09 Nov 2021, 12:24:43
Boh...
Allego uno screenshot col codice che ti ho scritto.
Ma forse non è ciò che volevi...
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: mariarosaria - 09 Nov 2021, 13:04:53
Ciao fracm.
Io ho provato il codice di Limma "in diretta" sul sito demo di cassiopeia e funziona.
Cerca di copiare in maniera corretta il codice e assicurati di averlo inserito nel file custom.


Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: fracm - 10 Nov 2021, 15:32:31
Ciao, allora grazie ho riprovato partendo da zero.Template Cassiopeia puro, lo duplico, creo file user.css, metto il codice di Limma e si, funziona, ma...io ho bisogno anche della topbar sopra l'header e la topbar rientra nel flex e si posiziona in left.Come toglierla dal flusso e lasciarla lassù in alto?
Grazie mille <3
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: Limma - 10 Nov 2021, 16:43:47
Devi modificare l'index.php del template.
Giusto per provare, invece che spostare la topbar "originale", ho creato una nuova posizione sopra l'header come puoi vedere in questo schizzo (http://disegnareilweb.it/JOOMLA4/index.php).
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: mariarosaria - 28 Dic 2021, 16:22:28
Ho provato a riprodurre la topbar, ma non sono riuscita.
La posizione topbar esiste già in cassiopeia, o me la sono sognata?
Soltanto che la vedo accanto al logo.
Sto facendo delle prove qui

http://www.cittadelladellimmacolata.it/cassiopeia/
Inoltre, potresti dirmi come si fa a farla andare via allo scroll e a rendere l'header "sticky"?
Grazie
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: Limma - 28 Dic 2021, 18:29:45
La posizione topbar esiste già in cassiopeia, o me la sono sognata?
Soltanto che la vedo accanto al logo.

Sì, la posizione topbar esiste già in Cassiopeia (e sta accanto al logo), ma, visto che fracm aveva chiesto una topbar che stesse sopra l'header, ho creato una nuova posizione che ho chiamato "supertopbar" che rispondesse alla richiesta.
Nell'index.php del template ho inserito questo codice subito sopra l'header:
Codice: [Seleziona]
<?php if ($this->countModules('supertopbar')) : ?>
            <div>
            <jdoc:include type="modules" name="supertopbar" style="none" />
            </div>
        <?php endif; ?>
Naturalmente ho inserito la nuova posizione nel file templateDetails.xml

Inoltre, potresti dirmi come si fa a farla andare via allo scroll e a rendere l'header "sticky"?
Nel backend di Cassiopeia c'è l'opzione "Sticky Header" che mi pare funzioni perfettamente da desktop, ma da mobile no... (o forse c'è qualcosa che non ho capito...).
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: mariarosaria - 28 Dic 2021, 20:08:33
Perfetto.
Adesso ci sono riuscita. Grazie mille... Era facile, avrei potuto metterci un po' più di impegno.

Effettivamente l'opzione "fissa testata" con visualizzazione mobile non funzica  ???
Non so se i più "cassiopeiani" ne sanno qualcosa in più.

Non ho aperto io la discussione, ma non so se per i moderatori sarebbe il caso di mettere [RISOLTO]  ???
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: xplosion - 29 Dic 2021, 08:48:43
Effettivamente l'opzione "fissa testata" con visualizzazione mobile non funzica  ???
Perchè su mobile c'è il BigMac  ;)
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: mariarosaria - 29 Dic 2021, 09:19:19
Sì, ma non capisco la correlazione...

Anzi, trovo abbastanza scomodo dover scorrere per tornare su se voglio aprire un'altra pagina dal "BigMac"...  >:(
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: xplosion - 29 Dic 2021, 10:27:46
Sì, ma non capisco la correlazione...

Anzi, trovo abbastanza scomodo dover scorrere per tornare su se voglio aprire un'altra pagina dal "BigMac"...  >:(
Puoi sempre abilitare il "back to top" link fisso in basso
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: Limma - 29 Dic 2021, 12:21:48
Anzi, trovo abbastanza scomodo dover scorrere per tornare su se voglio aprire un'altra pagina dal "BigMac"...  >:(

In realtà la stragrande maggioranza dei siti ha il menu sticky anche da mobile, ma a quanto ho visto in Cassiopeia c'è una regola css che, via mediaquery, toglie la posizione sticky all'header sotto i 992px di risoluzione orizzontale (sic!).
Per farla breve, ho aggiunto nell'user.css la seguente regola:
Codice: [Seleziona]
.container-header {
    position: sticky !important;
}
Pare funzionare...
Titolo: Re:Menu in top right accanto al logo Cassiopeia
Inserito da: mariarosaria - 29 Dic 2021, 12:38:27
http://www.cittadelladellimmacolata.it/cassiopeia/ (http://www.cittadelladellimmacolata.it/cassiopeia/)
Funziona alla grande  ;D