WebSite X5Help Center

 
Vincenzo Errico
Vincenzo Errico
User

Break point  it

Autore: Vincenzo Errico
Visite 2428, Followers 2, Condiviso 0  

Ciao, ho impostato i Break point a 480, 720, 960, 1200. La domanda è questa: è possibile azionare il menu hamburgher dai 720px in giù e lasciare alle risoluzioni più alte il menu desktop? Grazie mille

Postato il
37 RISPOSTE - 5 UTILI
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... penso di sì; ...basta provare se è possibile impostare il primo a 720... ... ...l'importante è che l'eventuale menu orizzontale ci stia dentro per intero...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Vincenzo Errico
Vincenzo Errico
User
Autore

si ci sta dentro... ma come dici tu dovrei eliminare il 960 e il 1200?

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

Perchè non vedo opzioni che permette di scegliere da che break point iniziare a visualizzare il menu hamburgher! O mi sbaglio?

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

A quanto ho capito non c'è possibilità! Nel mio caso al di sotto dei 1200px scatta subito il menu responsive! Ci sarà (per rimediare) un po' di codice da inserire che permetta di bloccare questa scelta automatica? lasciando il menu desktop anche al breck point inferiore?

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

Una regola CSS che blocchi quella nativa e settare una diversa? Sempre che di CSS si tratti! :)

Leggi di più
Postato il da Vincenzo Errico
Giancarlo B.
Giancarlo B.
User

Vincenzo.. non so se può esserti utile però sul file css in

css/custom-header-fixed-menu-mobile.css

ha un valore fissato a:

/* a 1200 compare il menu mobile */ @media screen and (max-width: 1200px)

prova ad editarlo manualmente e portarlo al valore che a te interessa.. poi vedi se ti funziona.

Leggi di più
Postato il da Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

...non posso dire molto e secondo me si dovrebbe cercare di agire da programma senza manomettere; ...comunque con JS si potrebbero disabilitare i CSS, ed a seguito aggiungere le proprie regole...

.



Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User

oppure provare passo 5 opzioni avanzate codice .... 

prova ad inserire .... inserisci:

<style>

/* a 720 compare il menu mobile */

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

/* menu mobile */

#imMnMn > ul {

bottom: auto !important;

top: 60px !important;

width: 129px;

overflow: auto;

height: calc(100% - 60px);

}

#imMnMn .imMnMnTxt {

border: none;

border-bottom: 0px solid #fff;

}

#imMnMn .hamburger-menu-close-button {

background-color: #fff;

font-size: 60px; color: #646464;

font-weight: bold;

padding: 0;

text-align: center;

width: 130px;

}

}

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

/* menu mobile */

}

</style>

Leggi di più
Postato il da Giancarlo B.
Vincenzo Errico
Vincenzo Errico
User
Autore

Ciao giancarlo, grazie! Ho provato a modificare il css come dici ma non viene recepito! Bisognerebbe bypassare il codice sorgente scritto in automatico da website. Quel foglio css che fai riferimento l'ho inserito manualmente per fissare la barra di menu + intestazione e una modifica al menu hamburgher. Se vedi ora è online modificato come dici, ma nulla, non funziona purtroppo!

Leggi di più
Postato il da Vincenzo Errico
Giancarlo B.
Giancarlo B.
User

ho visto Vincenzo... peccato vediamo altre soluzioni da chi ne sa..  

Leggi di più
Postato il da Giancarlo B.
Mirko Boschetti
Mirko Boschetti
Moderator

questo mi sembra monco però, cosa dovrebbe fare a quella misura...?....

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

/* menu mobile */

}

Leggi di più
Postato il da Mirko Boschetti
Vincenzo Errico
Vincenzo Errico
User
Autore

Ciao Kolasim, tu spresti come fare per disabilitare quel css per aggiungere una nuova regola? Di js (e non solo) non saprei... :)

Leggi di più
Postato il da Vincenzo Errico
Giancarlo B.
Giancarlo B.
User

Vincenzo inserendo il codice al passo 5 a me funzionava ... però evidentemente ci sono altri fattori da valutare...

Leggi di più
Postato il da Giancarlo B.
Mirko Boschetti
Mirko Boschetti
Moderator
Giancarlo B.
oppure provare passo 5 opzioni avanzate codice ....  prova ad inserire .... inserisci: <style> /* a 720 compare il menu mobile */ @media screen and (max-width: 720px) { /* menu mobile */ #imMnMn > ul { bottom: auto !important; top: 60px !important; width: 129px; overflow: auto; height: calc(100% - 60px); } #imMnMn .imMnMnTxt { border: none; border-bottom: 0px solid #fff; } #imMnMn .hamburger-menu-close-button { background-color: #fff; font-size: 60px; color: #646464; font-weight: bold; padding: 0; text-align: center; width: 130px; } } @media screen and (max-width: 480px) { /* menu mobile */ } </style>

ma lo hai postato tu....

ok capito ora.....è la mia età che avanza...

Leggi di più
Postato il da Mirko Boschetti
Vincenzo Errico
Vincenzo Errico
User
Autore

Questo template è realizzato (per renderlo responsive) inserendo codice esterno non da programma. Cioè con una versione precedente alla 12. 

Leggi di più
Postato il da Vincenzo Errico
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Vincenzo Errico
Ciao Kolasim, tu spresti come fare per disabilitare quel css per aggiungere una nuova regola? Di js (e non solo) non saprei... :)

... non posso dirti di più...

... (si potrebbe agire in modo mirato), ... per fare una cosa veloce, prima della chiusura di /HEAD inserisci questo SCRIPT:

<script>  $('link[rel=stylesheet]').remove(); </script>

... e poi a seguire (sempre in /HEAD) rimetti tutti i TAG LINK REL dei CSS, escludendo quello dei MEDIA QUERY, che invece inserirai corretti con le tue regole...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Vincenzo Errico
Vincenzo Errico
User
Autore

mmmh, è complesso per il mio poco sapere! Grazie comunque!

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

Per disabilitare solo quella funzione specifica? Impossibile?

Leggi di più
Postato il da Vincenzo Errico
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Vincenzo Errico
mmmh, è complesso per il mio poco sapere! Grazie comunque!

... faccio eccezione al [... non posso dirti di più...]

... la mia IDEA è semplice, basta provarla, (e mi sono reso conto che da spazio ad una infinità di altre ide!!! ... se avessi il programma!!!)...

... ho approfittato del template delle prove di Luigi per il GoTop,  editando direttamente in rete e variando i valori di @media a casaccio nei CSS sostituiti, con risultato e prospettive eccezionali:   http://goo.gl/TzhZB3

... valuta e provaci tu,; ... adesso dipende solo da te...

________________________

... np: ... comunque, e lo ripeto spesso, ...a parer mio tutta questa manipolazione non serve; ...il sito miglior tra quelli visti resta sempre quello che si sa fare con gli strumenti del Programma, senza strafare, e/o copiare siti di altri! che spesso lasciano il tempo che trovano!...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Vincenzo Errico
Vincenzo Errico
User
Autore

Confesso che non saprei dove mettere le mani, purtroppo! 

Leggi di più
Postato il da Vincenzo Errico
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Vincenzo Errico
Confesso che non saprei dove mettere le mani, purtroppo! 

... devi solo cimentarti e provare, postando il link di quello che hai fatto...

... proprio adesso ho riprovato sul template di Mirko che uso per test:
http://www.zspace.it/kolasim/trash/mirko12_media3.html
... le mie modifiche le troverai dal rigo nr. 43 al 48, a partire da:
<!-- alterazione @media KolAsim -->
... niente di più...
... poi guardati i valori assegnati (alla carlona) nei fogli CSS usati da me nei riferimenti @media ...
...
... se conosci il programma lo attui in meno di cinque minuti...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Vincenzo Errico
Vincenzo Errico
User
Autore

ok, ci provo grazie!

Ma noto guardando il sito su desktop che mi compare sempre la barra di scroll orizzontale quando restringo il browser! Perchè?

Leggi di più
Postato il da Vincenzo Errico
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... certamente, ...perchè ha chiesto tu di vederlo normale sino a una certa misura, altrimenti verrebbero nascoste parti della pagina...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Vincenzo Errico
Vincenzo Errico
User
Autore

io intendevo normale solo per il menu non per i contenuti... cioè che al breck point inferiore (960) a quello massimo (1200 nel mio caso) rimanesse il menu invariato e solo al di sotto dei 960px far azionare il menu hamburger.

Leggi di più
Postato il da Vincenzo Errico
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... allora controllati il file menu.css

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Vincenzo Errico
Vincenzo Errico
User
Autore

ho provato già a modificarlo... ma senza successo! Come non reagisse a quella regola.

Leggi di più
Postato il da Vincenzo Errico
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT

... non so cosa fai, comunque hai visto che si può controllare con semplicità...

... però sei tu che devi studiarti e modificarti a tuo piacere le istruzioni @media ...

...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Uberto Piccardo
Uberto Piccardo
User

Ciao Vincenzo , io ho lo stesso tuo problema come altri utenti che hanno scritto post al riguardo .

L'unica soluzione sarebbe quella che incomedia rilascisse un aggiornamento dove vi sia la possibilità di variare l'intervallo del breackpoint smartphone da 0 a 480 , così l'intervallo desktop sarebbe 480 a 960 ( o 1200 ) e la visualizzazione mobile avverrebbe solo sui smartphone .

Purtroppo non ho avuto da incomedia rassicurazioni sul possibile futuro aggiornamento.

Leggi di più
Postato il da Uberto Piccardo
Roberto O.
Roberto O.
User

Ciao, ho da poco improntato un sistema per realizzare un sito a tutto schermo, responsive  senza uso di nessun codice e ho quindi lavorato parecchio sui breackpoint. Non sapevo molto all'inizio e trovavo logico che ci fosse una funzione che permettesse la scelta di quale breakpoint potesse definire  l'apertura dell' menù hamburgher (HMB) , ma non c'e'. Si passa alla modalità impaginazione responsive quando apri la pagina su una finestra o su un monitor anche solo un px inferiore al numero dei px impostati per la pagina dei contenuti. Però girandoci un pò attorno un sistema c'e'. Esempio; tu imposti la pagina contenuti a 1200, si crea il primo BP automaticamente  a 1200, e poi aggiungi 480, 720, 960 . A 1199 scatta l'impostazione responsive. Però, e stiamo parlando sempre di programma e non di codici, non è detto che debba per forza apparire anche il menù HMB perchè quello appare nel punto in cui i pix della finestra o schermo corrispondono alla larghezza del menù impostato . In pratica se il tuo menù all'interno della barra misura 720 px il menu HMB apparira con la finestra a 719 se poi fai un menù lungo 480, passerà HMB a 479.

Quindi ricapitolando , pagina contenuti 1200, BP a 960,720,480, menu largo 720, il menù HMB si apre a 719, unico accorgimento impostare le grafiche delle due strutture (principale e responsive) più simili possibili in modo da non notare, l'immediato passaggio al primo restringimento.

Qui un esempio

http://www.laboratoriowebonline.com/inlavorazione/pro12/

PS. Resto comunque sempre dell'opinione che queste funzioni dovrebbero essere messe a disposizione dal programma.

Leggi di più
Postato il da Roberto O.
Roberto R.
Roberto R.
User

Ciao, ho messo le impostazioni per avere HMB a 720 che consigli ma non c'è verso di riuscire ad avere il sito come nel tuo esempio se mi puoi dare altri consigli. Grazie Roberto

Leggi di più
Postato il da Roberto R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese PT
Roberto R.
Ciao, ho messo le impostazioni per avere HMB a 720 che consigli ma non c'è verso di riuscire ad avere il sito come nel tuo esempio se mi puoi dare altri consigli. Grazie Roberto

... come detto all'inizio si può gestisce da programma, e nel caso della v.12_PRO  hai anche a disposizione max 10 breakpoint, quindi per tutte le necessità immaginabili...

... ... come detto altre volte, quando la barra del menu non sta più nella pagina, si passerà in modalità responsive e se larga quanto l'intestazione l'hamburgher apparirà al primo breakpoint che definisce la larghezza del Sito...

... per capire cosa hai fatto posta il LINK del tuo esempio in modo che si possa valutare...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Ciao a tutti... Con evo 12 che ha solo 3 breakpoint impostati:

il problema sta nell'ultimo breakpoint, quello per smartphone.. provate a portarlo (stranamente!) da 480 a 720 e vedrete che il menù normale viene mantenuto fino a 720 px per un sito con larghezza di 1180 px totali (vedi screenshot).... Chiaramente poi bisogna capire cosa accade ai contenuti di ogni singolo sito portando l'ultimo breakpoint da 480 a 720... a me nel template che allego nel secondo screenshot non succede quasi nulla di anomalo ai contenuti portando l'ultimo breakpoint a 720, tranne nel testo di descrizione in alcune celle nella parte bassa della pagina (nella parte superiore delle celle), che diventa da visualizzazione smartphone..però la cosa è accettabile a mio avviso...e per il resto non vedo grossi problemi.. magari bisogna poi solo sistemare in un certo modo, diverso, alcuni contenuti in base al sito di ognuno. E fa tutto il programma così.

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

e qui è la dimostrazione che il sito largo 1180 px mi mantiene il menù desktop fino a 720 px (vedi cerchio rosso in alto a destra)

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

chiaramente se il menù desktop contiene tantissime voci, beh non c'è santo che tenga... a me però, prima di impostare l'utimo breakpoint da 480 a 720, mi appariva l'hamburger già a 850 circa.. certo la cosa migliore sarebbe, come hanno proposto in molti di poter gestire in modo manuale e a propria discrezione i menù desktop e responsive. 

Leggi di più
Postato il da Giuseppe Guida