WebSite X5Help Center

 
Vincenzo Errico
Vincenzo Errico
User

Pulsante menu in modalità responsive  it

Autore: Vincenzo Errico
Visite 2236, Followers 3, Condiviso 0  

Buongiorno, è possibile ingrandire il pulsante menu che viene visualizzato alle risoluzioni inferiori? Grazie

Postato il
23 RISPOSTE - 2 UTILI - 1 CORRETTO
Vincenzo Errico
Vincenzo Errico
User
Autore

Ovviamente senza intaccare le dimensioni del font di menu!

Leggi di più
Postato il da Vincenzo Errico
 lemonsong  
 lemonsong  
User

Puoi provare da programma aumentando i margini verticali in "Stile del Menu Principale".

Se l'effetto sul menu principale non ti convince, puoi provare con questo CSS da incollare al Passo 4 - Statistiche, SEO e Codice - Esperto - Prima della chiusura del tag HEAD:

<style>
#imMnMn .hamburger-bar {
    height: 4px;
    margin: 4px auto;
    width: 100%;
}
</style>

Oltre a personalizzare altezza e margini puoi esprimere la larghezza in pixel; questo però potrebbe comportare l'aggiunta della proprietà margin-left con valori negativi.

In allegato l'esempio postato, applicato al sito nel tuo profilo.

Leggi di più
Postato il da  lemonsong  
Mirko Boschetti
Mirko Boschetti
Moderator

@Lemonsong

provato il codice e funzia solo in Responsive...

_____________________________

Edit:

funzia invece, lo avevo provato nel mio sito prova con menu spostato a sx e allora in modalità Desktop creava casino....ma con menu Hamburger a dx va tutto ok...

Leggi di più
Postato il da Mirko Boschetti
 lemonsong  
 lemonsong  
User

Il CSS può essere utile se non si vuole aumentare la dimensione del font del menu principale oppure se agire sui margini verticali non ci convince, come ho già scritto nel primo post.

Leggi di più
Postato il da  lemonsong  
Vincenzo Errico
Vincenzo Errico
User
Autore

Intanto grazie per essere intervenuti!

Ho provato la soluzione di Lemonsong, in effetti il tasto si ingrandisce come vorrei ma dall'altra parte crea un abbassamento del menu in visualizzazione desktop. Si può risolvere...? Grazie

Leggi di più
Postato il da Vincenzo Errico
Agostino M.
Agostino M.
User

ho usato il css di lemonsong ma mi crea un effetto sul mod desktop. allego foto

Leggi di più
Postato il da Agostino M.
Agostino M.
Agostino M.
User

forse perchè nel body ho usato anche questo:

<style>

#imMnMn .hamburger-bar {

background-color:black;
padding-bottom: 0px;

}

</style>

<style>

@media screen and (max-width: 959px) {

.hamburger-button::after {

content:"Menù";

}

}

</style>

Leggi di più
Postato il da Agostino M.
Agostino M.
Agostino M.
User

se elimino

background-color:black;

scompaiono le linee nere che diventano trasparenti perchè le scritte del menu' desktop scendono in basso. come si sistema ?

Leggi di più
Postato il da Agostino M.
 lemonsong  
 lemonsong  
User
Vincenzo Errico
Ho provato la soluzione di Lemonsong [...]

Quale soluzione? Ce ne sono due.

Se leggi con attenzione è scritto tutto chiaramente.

Leggi di più
Postato il da  lemonsong  
Agostino M.
Agostino M.
User

ho usato questo

<style>
#imMnMn .hamburger-bar {
    height: 4px;
    margin: 4px auto;
    width: 100%;
}
</style>

modificandolo in:

<style>
#imMnMn .hamburger-bar {
    height: 5px;
    margin: 5px auto;
    width: 125%;
}
</style>

ma se cambio colore aggiungendo:

background-color:black;

appaiono le strisce nere come foto allegata precedentemente

se non cambio colore e resta bianco le strisce nere scompaiono ma le scritte del menù desktop scendono

Leggi di più
Postato il da Agostino M.
 lemonsong  
 lemonsong  
User

@Agostino

Se posti un link è meglio.

Leggi di più
Postato il da  lemonsong  
Agostino M.
Agostino M.
User

ecco il link grazie

www.agostinomacchione.it

Leggi di più
Postato il da Agostino M.
 lemonsong  
 lemonsong  
User
Agostino M.
www.agostinomacchione.it

Il valore attuale del tuo breakpoint è 1279px

Inoltre sposta questo CSS all'interno della media query:

#imMnMn .hamburger-bar {
    height: 5px;
    margin: 5px auto;
    width: 125%;
}

Leggi di più
Postato il da  lemonsong  
Agostino M.
Agostino M.
User

scusa la mia ignoranza...

così ?

<style>

@media screen and (max-width: 1280px) {

.hamburger-button::after {
height: 5px;
margin: 5px auto;
width: 125%;
content:"Menù";
color:white;

}

}

</style>

Leggi di più
Postato il da Agostino M.
 lemonsong  
 lemonsong  
User

No, devi spostare l'intera regola CSS all'interno della media query:

<style>
@media screen and (max-width: 1279px) {
    .hamburger-button::after {
        content:"Menù";
        color:white;
    }
    #imMnMn .hamburger-bar {
        height: 5px;
        margin: 5px auto;
        width: 125%;
    }
}
</style>

Leggi di più
Postato il da  lemonsong  
Agostino M.
Agostino M.
User

ok grazie così funziona:

<style>

@media screen and (max-width: 1280px) {

.hamburger-button::after {

content:"Menù";
color:white;


}

#imMnMn .hamburger-bar {

height: 5px;

margin: 5px auto;

width: 125%;

}


}

</style>

Leggi di più
Postato il da Agostino M.
Vincenzo Errico
Vincenzo Errico
User
Autore

Ho usato questa formula:

<style>
#imMnMn .hamburger-bar {
    height: 4px;
    margin: 4px auto;
    width: 100%;
}
</style>

in allegato la foto che ti permette di comprendere meglio il problema che mi crea al menu.

Leggi di più
Postato il da Vincenzo Errico
 lemonsong  
 lemonsong  
User

Ti chiedo scusa, nel primo codice non ho aggiunto la media query.

Prova così:

<style>
@media screen and (max-width: 998px) {
#imMnMn .hamburger-bar {
    height: 4px;
    margin: 4px auto;
    width: 100%;
    }
}
</style>

998px è il tuo attuale valore di "entrata" del menu hamburger.

Leggi di più
Postato il da  lemonsong  
 lemonsong  
 lemonsong  
User

Comunque, nel tuo caso, potrebbe essere utile aumentare i margini verticali (senza CSS).

 lemonsong  
Puoi provare da programma aumentando i margini verticali in "Stile del Menu Principale".

Se hai già provato, come non detto.

Leggi di più
Postato il da  lemonsong  
Agostino M.
Agostino M.
User

lemon come faccio nel css a far si che la scritta usata

content:"Menù";

venga allineata da destra verso sinistra e quindi verso l'interno?

te lo chiedo perchè se la scrivo in maiuscolo esce dallo schermo e non si vedono le ultime lettere.

grazie

Leggi di più
Postato il da Agostino M.
 lemonsong  
 lemonsong  
User

Puoi inserire questa proprietà e valore: margin-left: -10px;

Oppure, puoi spostare il pulsante con questa regola:

#imMnMn .hamburger-button {
    right:20px;
}

Leggi di più
Postato il da  lemonsong  
Vincenzo Errico
Vincenzo Errico
User
Autore

Grazie Lemonsong, hai ragione...ho risolto aumentando i margini verticali

Leggi di più
Postato il da Vincenzo Errico