Meniu fixat intr-o tema WordPress

Am scris un articol acum ceva timp si am intalnit situatia de curand cum sa fac acelasi lucru doar ca de data asta prin cod fara plugin. Asadar iata codurile care trebuiesc folosite pentru a avea un meniu fix in momentul cand un utilizator navigheaza pe site-ul tau WordPress.

In primul rand libraria jQuery trebuie sa fie functionala pe site pentru ca ne vom folosii de ea.

Codul urmator se pune in fisierul footer.php din templatul site-ului dupa functia wp_footer();

<script type="text/javascript">
   jQuery(window).scroll(function(){
         if (jQuery("body").scrollTop() > 150) {
        jQuery(".main-navigation").addClass("fixed");
       } else {
        jQuery(".main-navigation").removeClass("fixed");
       } 
     });
</script>

Tot ce trebuie facut este sa inlocuiti clasa .main-navigation din cod cu clasa specifica meniului din template.

2017 07 18 112032

Urmatorul pas este sa adaugati aceasta functie in fisierul functions.php din template

function meniu_fixed() { 
  if ( is_user_logged_in() && current_user_can( 'manage_options' ) ) {
        ?>
       <style type="text/css">
        .fixed {
         position: fixed!important;
         top:32px;
         z-index: 9999;
      }
       </style>
   <?php 
  }
}
add_action('wp_head', 'meniu_fixed');

2017 07 18 112407

Si ultimul pas este adaugare acestui cod in style.css al templatului.

.fixed {
     position: fixed!important;
     top:0;
     z-index: 9999;
}

2017 07 18 112742

 

Faci un comentariu sau dai un răspuns?

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte articole din aceiasi categorie

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.

    Daca vrei Front-end in general recomand:
    https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/
    https://www.udemy.com/course/advanced-javascript-concepts/
    https://www.udemy.com/course/complete-react-developer-zero-to-mastery/
    Daca vrei doar Javascript recomand:
    https://www.udemy.com/course/the-complete-javascript-course/
    https://www.udemy.com/course/advanced-javascript-concepts/