[Gantry] Rendere il logo responsive

[marcothemix]

Ciao,
uso il framework e template gratuito Gantry.
Nel backend del layout ho inserito il logo di fianco al menù.
Tuttavia il logo risulta essere più alto del menù, e l'immagine impostata parte da più in basso come se ci fosse un padding.


Vorrei che l'immagine del logo abbia la stessa altezza e padding del menù, e che sia responsive.
Dunque che posso mettere anche un'immagine più alta, e sarà ridimensionata in automatico senza alterarne le proporzioni.
Immagino he dovrò operare overraidando delle classi del css ma non so bene come muovermi.


Come dovrei procedere?


Grazie mille

[danielecr]

Scrivi il link al sito, sarà più facile aiutarti.

[tomtomeight]

Il logo nativo del template è responsive, ti basta sostituire l'immagine nell'apposito spazio riservato al logo lasciando la stessa classe.

[marcothemix]

Dato che sto sviluppando il sito in locale, vi mostro degli screen.


Ho usato il logo di default del template, ma dal layout manager del Gantry ho spostato il logo sulla stessa riga del menù e credo che le classi CSS predefinite non siano state scritte per essere visualizzate sulla stessa riga.


L'effetto è il seguente e come si nota dallo screen il logo ha del padding in quanto inizia dalla linea 1 e non rispetta le dimensioni del menù che dovrebbe finire alla linea 2.



Qui mostro come ho semplicemente inserito il logo:




Come dovrei fare?

Grazie e buona giornata

[marine]

se ridemensioni l'immagine abbassandola?

[marcothemix]

Ho provato a districarmi fra le classi CSS e il backend del Gantry ma non sono ancora riuscito a venirne a capo.

Scrivi il link al sito, sarà più facile aiutarti.

Ho caricato il sito in remoto al seguente url: http://helloworld.jdevcloud.com/index.php/it/

Il logo nativo del template è responsive, ti basta sostituire l'immagine nell'apposito spazio riservato al logo lasciando la stessa classe.

E' vero il logo è responsive, se riduco la dimensione del browser, il logo si riduce, tuttavia andrebbe modificato l'altezza del menù per adattarlo a quello del logo o viceversa, e il logo non risulta centrato col menù, parte da più in basso, come se ci fosse un padding, ma che non ho trovato all'interno del css.
sito in remoto:http://helloworld.jdevcloud.com/index.php/it/

se ridemensioni l'immagine abbassandola?

Resterebbe il problema che l'immagine del logo non sarebbe centrata col menù 


Grazie mille a tutti per le risposte di aiuto 

[tomtomeight]

Il logo originale ha un altezza di 150px, puoi modificare questo eealtri valori come margin, padding, ecc. agendo sul custom.css dopo aver individuato la classe della immagine.

[marcothemix]

Il logo originale ha un altezza di 150px, puoi modificare questo eealtri valori come margin, padding, ecc. agendo sul custom.css dopo aver individuato la classe della immagine.

Se ho individuato bene la classe, non contiene nessun padding, ma solo la dimensione di 150px.
Credo che il logo si trovi a sua volta dentro qualche altro container, ma non riesco a venirne a capo.


Qui c'è la classe che ho trovato del logo:


.gantry-logo {
    display: inline-block;
    @include breakpoint(mobile-only) {
        display: block;
        text-align: center;
    }
    img {
        width: 150px;
    }
}

[xplosion]

Dico la mia, potresti provare di aggiungere nel tuo custom.scss questa istruzione ?

Codice: [Seleziona]

#g-navigation .g-main-nav {margin: auto!important;}Vedi che succede

[tomtomeight]

La classe è quella e il padding o il margin puoi aggiungerlo per spostare il logo. Io in un mio sito ho aumentato le dimensioni agendo su quella classe, l'ho fatto nel custom.css che ho aggiunto come da documentazione gantry.

[marcothemix]

Dico la mia, potresti provare di aggiungere nel tuo custom.scss questa istruzione ?

Codice: [Seleziona]

#g-navigation .g-main-nav {margin: auto!important;}Vedi che succede

Ho inserito il codice indicato nel custom.scss e ricompilato.
Ora logo e menù si trovano alla stessa altezza 
Tuttavia si è venuto a creare dello spazio vuoto(indicato dalle linee blu) sia sopra che sotto il menù che non ci deve essere.

La classe è quella e il padding o il margin puoi aggiungerlo per spostare il logo. Io in un mio sito ho aumentato le dimensioni agendo su quella classe, l'ho fatto nel custom.css che ho aggiunto come da documentazione gantry.

Ho provato a forzare il padding e il margin a zero ma non ha alcun effetto, resta quello spazio vuoto sopra e sotto il menù e logo.


Ho aggiunto questa regola al css:


.gantry-logo {
    img {
        height: 62px;
        width: auto
    }
}


In questo modo logo e menù hanno la stessa altezza.
Però non mi piace inserire dei valori statici, come posso richiamarmi la stessa altezza del menù?
O ancor meglio rendere l'altezza del menù uguale all'altezza del logo?
In questo modo se capita un logo che deve essere più alto, il menù si adatterà automaticamente.
qualcosa del tipo:


#menu {
    height: .gantry-logo.img.height
}
Ma non conosco la sintassi, né riesco a capire dall'inspector quale sia la classe del menù


Grazie mille

[xplosion]

Guarda, non complicarti la vita inserendo valori per il padding. Gantry ha già predisposto delle classi apposta . Devi andare in Layout Manager > Impostazioni (rotellina) per Logo e Menu. Devi scegliere nomargin e nopadding dalla casella a discesa  Ti consiglio di dare un'occhiata alla documentazione  E tutto chiaro
Ciao

[marcothemix]

Guarda, non complicarti la vita inserendo valori per il padding. Gantry ha già predisposto delle classi apposta . Devi andare in Layout Manager > Impostazioni (rotellina) per Logo e Menu. Devi scegliere nomargin e nopadding dalla casella a discesa  Ti consiglio di dare un'occhiata alla documentazione  E tutto chiaro
Ciao

WoW ottimo!
Ho letto la guida che hai in calce, non sapevo di questa features, è molto comoda e sopratutto pulita.
Tuttavia non fa del tutto al caso mio in quanto un pò di margin mi fa piacere.
Come posso definire io delle nuove Block variazion?


Attualmente ho risolto creando i seguenti override nel custom.scss, ma preferirei farlo con dei Block variation custom.
Anche perché usando i Block varition son certo di applicare la modifica solo al blocco di interesse.
In questo caso ad esempio la classe .g-content non credo gestisca solo il menù e ne ho fatto un override globale


// Altezza logo 65px + 5px di padding
.gantry-logo-custom {
    padding: 5px;
    margin: 0px;
    img {
        height: 62px;
        width: auto
    }
}

// Da al menù la stessa altezza del logo
.g-menu-item-container {
    padding: 24px !important;
}

// Per il menù, niente margin e padding
.g-content {
    padding: 0rem;
    margin: 0rem;
}
#g-navigation .g-main-nav {
    margin: 0rem;
    padding: 0rem;
}

Grazie mille

[xplosion]

Nomargin e nopadding li hanno inseriti per azzerare i valori (uno o l'altro, o tutti e due) che può tornare comodo in molti casi. Ma se vuoi assegnare dei certi valori  secondo me dovresti aggiungere una classe personalizzata e definirla nel custom.scss. Ovvio che puoi crearti delle variazioni per i blocchi  ma è un po' più complicato, devi modificare certi file.yaml ... Non voglio entrare nei dettagli .