Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Scatto Menu Flottante

  1. #1

    Scatto Menu Flottante

    Salve,
    non è la prima volta che mi imbatto in questo problema, l'effetto indesiderato si verifica nel momento in cui compare il menù.
    Si ha la sensazione, anzi sembra proprio che la pagina sotto si muova nel momento in cui compare il menù.

    Qualcuno saprebbe spiegarmi da cosa è dovuto questo problema o come fare per evitare che si verifichi?

    Lascio un link di esempio:
    https://ld.csdstore.it/
    Ultima modifica di Luigi636; 26-09-2020 a 10:47

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    130
    Penso che il problema sia quando interviene il fixed su header-top, secondo me si poteva provare a definire un height su header-top e magari rendere fixed il container al suo interno, cosi quando rendi fixed l'elemento non hai la perdita di pixel che ti tira su tutta la pagina.

  3. #3
    Grazie mille ninja72,
    domani proverò sicuramente!

  4. #4
    Con il fixed non prende il suo spazio, quindi la parte blu sale sopra

  5. #5

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,764
    Ciao, è buona l'intuizione di ninja72 ma proverei ad aggiustare il tiro magari definendo meglio l'altezza del contenitore (l'elemento #header).

    Nel file /themes/Child/assets/css/theme.css la prima regola è:

    codice:
    #header{
      height: 191px;
    }
    Questo valore viene considerato (in base a diversi fattori) quando l'altezza del suo contenuto va a ridursi ulteriormente; in sostanza, quando header-top risulta essere fixed, e viene quindi tolto dal normale flusso dei contenuti, ciò che segue si posiziona a ridosso di quei 191px.

    Il fatto è che l'attuale contenuto di #header non ha esattamente quell'altezza. Oltretutto il suo valore cambia per le varie dimensioni del viewport, in base ai breakpoint definiti per il responsive.

    Puoi notare infatti che per viewport piccoli il contenuto della pagina va a coprire la barra del menu (a prescindere dal problema che hai indicato).

    Potresti provare quindi a definire meglio il valore di quell'altezza, si nella regola di base sia per gli eventuali breakpoint in cui quel valore non coincide più.

    Da qualche prova che ho fatto, come base puoi mettere:
    codice:
    #header{
      height: 230px;
    }
    modificando quindi il valore di quella stessa regola indicata sopra. Questo dovrebbe andare bene per i vari breakpoint dalla dimensione più bassa fino a 1199px.

    Per viewport maggiori si noterebbe comunque uno scatto (anche se in maniera più lieve rispetto a quello attuale), per cui puoi definire quell'altezza in questo modo:
    codice:
    @media (min-width: 1200px) {
      #header { height: 252px; }
    }
    Prova e fai sapere.

    Ovviamente, nel caso in cui vai a modificare gli elementi dentro #header e questi influiscono sulla sua altezza, dovrai ridefinire opportunamente questo valore.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Grazie mille
    Molto molto più fluido! Non noto più scatti sinceramente..!

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,764
    bene, buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.