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;
}

---

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

Citazione:

---

Originalmente inviato da fotoebenessere

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

Citazione:

---

Originalmente inviato da lucafornaciarifotografie

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

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

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;
}

---

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

Ciao

Citazione:

---

Originalmente inviato da frasidipace

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.

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.

Citazione:

---

Originalmente inviato da lucafornaciarifotografie

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?

forse tela cavi aggiungendo un'altra regola css


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

Citazione:

---

Originalmente inviato da lucafornaciarifotografie

forse tela cavi aggiungendo un'altra regola css


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

---

Non funziona.

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

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.

Citazione:

---

Originalmente inviato da lucafornaciarifotografie

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.

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.

Citazione:

---

Originalmente inviato da lucafornaciarifotografie

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;
}

---

Citazione:

---

Originalmente inviato da lucafornaciarifotografie

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/