[RISOLTO] anticipare visualizzazione offcanvas

[mariarosaria]

Salve a tutti.

Se visitate questa pagina https://www.cittadelladellimmacolata.it/joomla4/ provando a restringere gradualmente la finestra del browser vi accorgerete che c'è un momento in cui il menu principale in alto, poichè non ci sta più di larghezza, se ne va giù sulla foto principale e soltanto dopo un ulteriore restringimento compare il menu offcanvas.

Come posso fare a forzare il menu sempre sulla stessa riga e comandare di far apparire l'offcanvas in anticipo, quando la riga diventa troppo corta per contenere tutte le voci?

Non vorrei che su alcuni dispositivi che rientrano in quel determinato "spazio di misure" ci siano problemi di visualizzazione.

Grazie

[sgiobbio]

Ciao, il tuo menu sborda giù a 1200px, poi a 980px interviene l'off-canvas.
Utilizza il file user.css nel template e aggiungi questa regola:

@media (min-width: 1200px)
.d-lg-block {
    display: block!important;
}
 

[mariarosaria]

Ciao sgiobbio. Grazie per il consiglio.

Ho provato, ma non funziona.
Se analizzi il menu, troverai la regola che mi hai indicato al primo rigo del mio file custom.css, ma non va.

Ho aggiunto le due parentesi graffe che mi sembrava mancassero per racchiudere la regola, ma non va.
Ho provato anche ad aggiungere la classe del mio menu a quella da te indicata con .d-lg-block .sp-megamenu-parent, ma nulla.
Tu l'avevi provato "in diretta" su browser e funzionava?


Altre idee?

[Limma]

Prova questa:

Codice: [Seleziona]

@media screen and (max-width: 1199px) {
  .sp-megamenu-parent > li > a, .sp-megamenu-parent > li span {
    padding: 0 6px;
}
}Non sarà perfetta, ma mi pare funzioni...

P.S. Cambia la "direzione" e anche la larghezza del dropdown della voce di menu "Contatti". Da circa 1300px in giù viene "tagliato" a destra. Non è una tragedia, ma non è bello da vedere.

[sgiobbio]

Ciao, io ho ottenuto l'effetto che volevi ispezionando il tuo sito con developer in chrome.
Lì vedo che il menu che diventa canvas è regolato dal css che ti ho scritto sopra:

@media (min-width: 992px)
.d-lg-block {
    display: block!important;
}

Che deriva dal file:
https://www.cittadelladellimmacolata.it/joomla4/templates/shaper_helixultimate/css/bootstrap.min.css

Cambiando min-width: 992px  con min-width: 1200px il menu esteso diventa canvas a 1200px invece che a 992px
Per farlo devi sovrascrivere quella regola con user.css o custom.css

[mariarosaria]

Grazie a tutti.
Il suggerimento di Limma funziona. Forse è un aggirare il problema, ma va benissimo.

sgiobbio io utilizzo firefox, ma ho aperto anche su chrome e la regola che suggerivi tu a me non va neanche lì.
In ogni caso, non vorrei dire una stupidaggine, ma non credo che custom o user sovrascriva bootstrap 

Di solito con custom uso sovrascrivere soltanto ciò che è contenuto in template.css perchè per quanto riguarda il resto non va.

Magari qualcuno dai "piani alti" potrebbe confermare quello che sto dicendo o viceversa.

Metto risolto, anche se mi piacerebbe avere conferme sulla sovrascrittura di bootstrap.

Grazie


p.s. Limma grazie anche per il suggerimento del dropdown. Modifico.

[Limma]

Di solito con custom uso sovrascrivere soltanto ciò che è contenuto in template.css perchè per quanto riguarda il resto non va.

Col file custom.css (o chi per lui a seconda dei casi) puoi sovrascrivere i css di pressoché qualunque cosa, sia essa Bootstrap o una qualunque estensione installata nel sito.
In realtà non c'è quasi estensione che utilizzo nei miei (pochi) siti della quale, per un motivo o per l'altro, mi trovo a modificarne i css, e sempre tramite il file custom.
Se vedi questo sito e clicchi sull'icona "cerca" vedrai in azione una finestra modal di Bootstrap pesantemente modificata via custom.css.

[mariarosaria]

Grazie Limma.
Effettivamente anch'io faccio parecchie modifiche.Solo che con helix ultimate mi è successo che custom non sovrascrivesse preset1.css o simili. Ma sicuramente sbagliavo qualcosa.
Grazie

[sgiobbio]

mi fa piacere che anche limma ti abbia confermato che con custom.css o user.css puoi sovrascrivere pressoché qualsiasi cosa.
La regola modificata che ti ho dato, l'ho testata sul tuo sito visualizzato in chrome con developer e funziona perfettamente, ma è ovvio che non posso uploadare io il file css sul tuo spazio web.
Secondo me utilizzi un custom.css o user.css in posizione sbagliata o qualcosa del genere, altrimenti funzionerebbe

[mariarosaria]

Il file custom è in posizione corretta e ho sovrascritto una marea di regole.
Adesso ho provato anche a sovrascrivere bootstrap e funziona (solo che non avevo mai provato prima).

Quando ti ho risposto la prima volta, se l'hai analizzato, la regola l'avevo inserita e veniva caricata, ma il menu saltava 
A volte ci sono dei misteri 

Grazie comunque per il suggerimento e il tempo che hai dedicato

[sgiobbio]

guarda, anche a me capita talvolta di impazzire con regole css che sembrano ignorate, ma ho imparato che magari basta aggiungere un  !important  alla regola e magicamente tutto si risolve