Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    828

    menu responsive si mostra bene solo dopo scroll iniziale

    Il menu in responsive mi fa uno strano comportamento: si apre non a full-width, e non comprende il bordo grafico. Devo iniziare a scrollare affinchè si mostri come deve. C'è qualche anima pia che ha tempo di visitare la pagina (anche simulando il responsive dal browser desktop) e dirmi cosa causa il problema?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Analizzando la pagina attraverso il debugger, si può notare che l'elemento in causa è questo:
    codice:
    <div id="sticky-wrapper" class="sticky-wrapper" style="height: 87px;">
    il quale ha una height applicata in linea e il cui valore cambia quando avviene uno scroll della pagina ma NON quando viene aperto/chiuso il menu.

    Il file in cui viene eseguito il gestore dell'evento scroll è "jquery.sticky.min.js", cioè un plugin jQuery "that gives you the ability to make any element on your page always stay visible"... aperta parentesi, allo stato attuale penso che si possa ottenere la stessa funzionalità anche solo attraverso CSS, usando la proprietà position:sticky che è supportata ormai dalla maggioranza dei browser odierni, senza bisogno di includere ulteriori plugin JavaScript... e tu mi dirai che quel plugin è parte del tema di wp e non sapresti come rimuoverlo... chiusa parentesi

    Quando avviene uno scroll, viene richiamata una qualche funzione lì dentro che modifica direttamente il valore di quella proprietà height, per cui l'elemento assume una impostazione del genere:
    codice:
    <div id="sticky-wrapper" class="sticky-wrapper" style="height: 514px;">
    Il problema quindi è dovuto al fatto che tale plugin vada ad impostare un valore fisso dell'altezza e lo aggiorni solo allo scroll.

    Ora, non ho idea del perché quel plugin abbia bisogno di impostare un'altezza fissa all'elemento sticky ma, così a spanne, ti direi di sovrascrivere quella proprietà via CSS in questo modo per provare a risolvere:

    codice:
    #sticky-wrapper {
      height: auto !important;
    }

    Vedi se risolve e soprattutto se non da problemi di qualche altro genere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    828
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    e tu mi dirai che quel plugin è parte del tema di wp e non sapresti come rimuoverlo...
    in realtà, nelle opzioni del tema c'è un button per disabilitare il menu sticky, quindi presumo che posso applicare il mio CSS ed avere uno sticky di default....
    ma non sto trovando quel div (e nemmeno sticky-wrapper) in nessun file... strano

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    non so, forse quel sticky-wrapper è creato dinamicamente da qualche inclusione del tema. Prova magari a disattivare il plugin e vedere se il div risulta comunque sulla pagina. Se risulta, allora puoi comunque applicare il tuo css; se non risulta bisogna capire se e come viene inserito il blocco del menu.

    Altrimenti la pezza è quanto ti ho indicato, cioè provare ad aggiungere "height: auto !important;" lasciando stare il plugin libero di fare le sue cose.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    828
    Si, ho optato per aggiungere solo #sticky-wrapper {height:auto!important;} in quanto disattivare il core plugin avrebbe solo mostrato una white screen of death.
    Grazie, non avrei altrimenti saputo individuare il problema.

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 © 2025 vBulletin Solutions, Inc. All rights reserved.