Visualizzazione risultati 1 fino 18 di 18

Discussione: Fermare la barra del men¨ allo scroll

  1. #1
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito Fermare la barra del men¨ allo scroll

    In pratica, vorrei che quando sposto la pagina verso l'alto si sposti anche tutto l'header compresa la barra del men¨, per˛ quando questa raggiunge il top dello schermo, si deve fermare e la home gli deve scorrere sotto.
    Questo Ŕ il sito https://albenessereblog.altervista.org

    ed il css che ho adesso:
    Codice HTML:
    /* Barra del men¨ */
    .primary-navigation-wrap {
    	position: relative;
    	background-color: #e6e6e6 !important;
    	border-top: 2px solid #fff;
    }

  2. #2
    frasidipace non Ŕ connesso AlterVistiano
    Data registrazione
    07-05-2010
    Messaggi
    942

    Predefinito

    Ciao,
    non credo si possa fare con un solo po' di CSS. Una cosa del genere richiede anche altro e, soprattutto, la conoscenza dell'architettura del tema.
    Se hai questa esigenza prova il plugin Sticky Menu & Sticky Header.

    Ciao

  3. #3
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    Citazione Originalmente inviato da fotoebenessere Visualizza messaggio
    In pratica, vorrei che quando sposto la pagina verso l'alto si sposti anche tutto l'header compresa la barra del men¨, per˛ quando questa raggiunge il top dello schermo, si deve fermare e la home gli deve scorrere sotto.
    Questo Ŕ il sito https://albenessereblog.altervista.org

    ed il css che ho adesso:
    Codice HTML:
    /* Barra del men¨ */
    .primary-navigation-wrap {
    	position: relative;
    	background-color: #e6e6e6 !important;
    	border-top: 2px solid #fff;
    }
    Prova cosi:
    Codice HTML:
    fixed-top {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    Naturalmente nel css

  4. #4
    frasidipace non Ŕ connesso AlterVistiano
    Data registrazione
    07-05-2010
    Messaggi
    942

    Predefinito

    Citazione Originalmente inviato da lucafornaciarifotografie Visualizza messaggio
    Prova cosi:
    Codice HTML:
    fixed-top {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    Naturalmente nel css
    Questo codice pone la barra di menu in alto, coprendo tra l'altro la header.
    fotoebenessere vuole, invece, che la header e la barra menu scorrano fino a che la stessa barra di menu raggiunge il top della pagina e lý si deve fermare.

    Saluti

  5. #5
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    Lo copre perchÚ al contenuto deve aggiungere il margin-top o padding-top della misura del suo men¨. Se lo vuole appiccicare gli basterÓ cambiare position fixed in position sticky.

    https://www.w3schools.com/howto/howt...ky_element.asp
    Ultima modifica di lucafornaciarifotografie : 19-01-2022 alle ore 01.24.10

  6. #6
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    La barra del men¨ che intendo bloccare Ŕ quella del sito: https://albenessereblog.altervista.org

    Per˛ qui si tratta di permettere all'header di scorrere fino al top e poi quando la barra del men¨ Ŕ arrivata sopra deve bloccarsi.

    EDIT

    Cosý sta iniziando a funzionare, ma io come admin vedo anche la barra-admin nera in alto di Wordpress, qui il men¨ non si blocca al top, ma ci passa un p˛ sotto.

    Codice HTML:
    #masthead {
      position: -webkit-sticky;
      position: sticky;
      top: -177px;
    }
    Ultima modifica di fotoebenessere : 19-01-2022 alle ore 09.05.10

  7. #7
    frasidipace non Ŕ connesso AlterVistiano
    Data registrazione
    07-05-2010
    Messaggi
    942

    Predefinito

    Credo sia normale con la barra admin attiva, l'importante Ŕ che gli utenti la vedano in modo corretto.

    Ciao

  8. #8
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    Citazione Originalmente inviato da frasidipace Visualizza messaggio
    Credo sia normale con la barra admin attiva, l'importante Ŕ che gli utenti la vedano in modo corretto.

    Ciao
    Sto comunque cercando un modo per bloccare la barra del men¨ sotto quella nera, cosý anche io vedo esattamente come i visitatori.

  9. #9
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    Anche io nel mio sito ho il men¨ sticky. Non puoi sistemare la visualizzazione admin e user con un unico css. dovresti creare una funzione che applica regole css diverse a seconda dell'utente.

  10. #10
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    Citazione Originalmente inviato da lucafornaciarifotografie Visualizza messaggio
    Anche io nel mio sito ho il men¨ sticky. Non puoi sistemare la visualizzazione admin e user con un unico css. dovresti creare una funzione che applica regole css diverse a seconda dell'utente.
    Va bene, che codice applico?

  11. #11
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    forse tela cavi aggiungendo un'altra regola css


    #wpadminbar #masthead {
    position: -webkit-sticky;
    position: sticky;
    top: -145px!important;
    }
    Ultima modifica di lucafornaciarifotografie : 19-01-2022 alle ore 16.12.07

  12. #12
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    Citazione Originalmente inviato da lucafornaciarifotografie Visualizza messaggio
    forse tela cavi aggiungendo un'altra regola css


    #wpadminbar #masthead {
    position: -webkit-sticky;
    position: sticky;
    top: -145px!important;
    }
    Non funziona.

  13. #13
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    Si avevo dimenticato che non sono div padre figlio ma fratelli.

    .nojq ~ .site #masthead{
    top: -145px!important;
    }

    ho messo -145px ma devi vedere la misura che ti serve la barra nera dovrebbe misure 32px

  14. #14
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    Ti consiglio di non usare per˛ l'id masthead ma di creare una classe.

    .nojq ~ .site .tua_classe{
    top: -145px!important;
    }
    .tua_classe{
    position: -webkit-sticky;
    position: sticky;
    top: -177px;
    }

    cosi Ŕ un codice + pulito, evito sempre di sovrascrivere id e classi che giÓ esistono meglio farsi le proprie.

  15. #15
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    Citazione Originalmente inviato da lucafornaciarifotografie Visualizza messaggio
    Ti consiglio di non usare per˛ l'id masthead ma di creare una classe.

    .nojq ~ .site .tua_classe{
    top: -145px!important;
    }
    .tua_classe{
    position: -webkit-sticky;
    position: sticky;
    top: -177px;
    }

    cosi Ŕ un codice + pulito, evito sempre di sovrascrivere id e classi che giÓ esistono meglio farsi le proprie.
    Non funziona, mi sa ma ci vuole una funzione che fa distinguere la distanza dal top della barra del men¨ quando c'Ŕ la barra nera o no.
    Ultima modifica di fotoebenessere : 20-01-2022 alle ore 04.02.35

  16. #16
    lucafornaciarifotografie non Ŕ connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    88

    Predefinito

    Provato sul mio sito e funziona, devi vedere quale classe o ID indentifica nel tuo tema la barra di wordpress nel mio tema .nojq
    poi naturalmente devi aggiungere la classe .tua_classe nel men¨ o usare l'ID #masthead come hai fatto prima.

  17. #17
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    Citazione Originalmente inviato da lucafornaciarifotografie Visualizza messaggio
    Provato sul mio sito e funziona, devi vedere quale classe o ID indentifica nel tuo tema la barra di wordpress nel mio tema .nojq
    poi naturalmente devi aggiungere la classe .tua_classe nel men¨ o usare l'ID #masthead come hai fatto prima.
    come css della barra nera ho questo
    Codice HTML:
    <div id="wpadminbar" class="nojq">
    e il codice che ho nell'header Ŕ questo che comprende tutta la parte header dove c'Ŕ il logo e la barra del men¨
    Codice HTML:
    <header id="masthead" class="site-header clearfix" role="banner">
    Questo Ŕ tutto il css:
    Codice HTML:
    #masthead {
    	position: -webkit-sticky;
    	position: sticky;
    	top: -155px;
    	z-index: 9999;
    }
    .nojq ~ .site #masthead {
    	top: -125px !important;
    }
    Ultima modifica di fotoebenessere : 20-01-2022 alle ore 05.08.02

  18. #18
    fotoebenessere non Ŕ connesso Utente AlterBlog
    Data registrazione
    30-06-2021
    Messaggi
    220

    Predefinito

    Citazione Originalmente inviato da lucafornaciarifotografie Visualizza messaggio
    Provato sul mio sito e funziona, devi vedere quale classe o ID indentifica nel tuo tema la barra di wordpress nel mio tema .nojq
    poi naturalmente devi aggiungere la classe .tua_classe nel men¨ o usare l'ID #masthead come hai fatto prima.
    Sto usando questo plugin e funziona perfettamente, sia con la barra di WordPress che senza, nel settaggio ho inserito #masthead e -155. Sto cercando di capire che CSS usa il plugin per poi trasferirlo manualmente nel mio.
    https://wordpress.org/plugins/sticky...ing-on-scroll/

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •