Funzione che controlla un CSS

Dovrei creare una funzione che modifica il CSS in base ad una situazione.
Praticamente, se l'amministratore (ID1) è loggato e quindi appare in alto la barra nera di WordPress, mostra questo CSS:

#masthead {
    position: -webkit-sticky;
    position: sticky;
    top: -123px;
    z-index: 9999;
} 

se invece la home viene vista da un visitatore e quindi non appare la barra nera, mostra questo CSS:

#masthead {
    position: -webkit-sticky;
    position: sticky;
    top: -155px;
    z-index: 9999;
} 

[GraphOGLRisorse]

Salve,
può farlo semplicemnte con js ad esempio:

<script>
function TestId(idelemento,idutente)
{ 
  var eid=document.getElementById(idelemento);
  
  if(idutente=="valore_id_admin"){
     eid.setAttribute("id", "masthead_admin");	 
   }else{
     eid.setAttribute("id", "masthead");
   }
}
</script>

<!-- test di verifica -->

<input type="button" onclick="TestId('masthead','valore_id_admin');" value="admin">
<input type="button" onclick="TestId('masthead_admin','altro_valore');" value="altro"><br>

<div id="masthead">test<div>

Cordiali saluti.

Dove lo metto, in functions.php child?

[GraphOGLRisorse]

Sì, la funzione dovrebbe andrebbe functions.php del tema child.

Prima mi sono limitato a rispondere alla domanda, però ripensandoci, visto che implicherebbe poi l'aggiunta comunque di codice php, nello specifico per Worpdress, in functions.php del tema child, dovrebbe essere più adeguato aggiungere questo:

function my_admin_bar_settings($content){
  return (current_user_can('administrator')) ? $content : false;
}

add_filter('show_admin_bar' , 'my_admin_bar_settings'); 

Crdial saluti.

Non funziona, la barra del menù della homepage va sotto un pò di pixel la barra nera di WordPress quando entro nella home come admin, dovrebbe invece fermarsi esattamente sotto. Se invece visualizzo la home come visitatore, e quindi senza la barra nera, si ferma giusta perché appunto ho settato il css che ho messo nel primo post.

Io avrei anche trovato questo plugin che svolge perfettamente il compito che chiedo, ma non mi sembra il caso di installare un plugin per una cosa del genere, un semplice codice mi basterebbe.
https://it.wordpress.org/plugins/sti...ing-on-scroll/

[frasidipace]

Ciao,
il top lo devi calcolare tenendo conto della barra admin. Il mio tema, infatti, lo imposta in questo modo.
Prova a scrivere il top nel CSS in questo modo senza includere la function:

top: calc(var(--admin-bar, 0px) + var(--frame-size, 0px))!important;

Questo è uno dei motivi per cui occorre scegliere un tema che offra massima libertà di configurazione senza stare ad impazzirsi con codici aggiuntivi che alla lunga potrebbero non funzionare più.

Ciao

Ciao,
il top lo devi calcolare tenendo conto della barra admin. Il mio tema, infatti, lo imposta in questo modo.
Prova a scrivere il top nel CSS in questo modo senza includere la function:

top: calc(var(--admin-bar, 0px) + var(--frame-size, 0px))!important;

Questo è uno dei motivi per cui occorre scegliere un tema che offra massima libertà di configurazione senza stare ad impazzirsi con codici aggiuntivi che alla lunga potrebbero non funzionare più.

Ciao

Con questo codice blocca tutto l'header con la barra del menu

[frasidipace]

Con questo codice blocca tutto l'header con la barra del menu

Lo hai inserito all'interno dell'intero codice CSS?

Lo hai inserito all'interno dell'intero codice CSS?

Di codice ho solo questo:

#masthead {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--admin-bar, 0px) + var(--frame-size, 0px))!important;
	z-index: 9999;
}

[frasidipace]

Evidemente blocca tutto perché stai utilizzando l'id #masthead.
Individua l'id o la class del solo menu.

Ciao

Evidemente blocca tutto perché stai utilizzando l'id #masthead.
Individua l'id o la class del solo menu.

Ciao

L'unico che funziona (senza la barra nera di WordPress) è ancora questo, se invece voglio fermarlo al top con la barra di WordPress devo settare -123px. devo scegliere uno o l'altro.

#masthead {
	position: -webkit-sticky;
	position: sticky;
	top: -156px;
	z-index: 9999;
}