web-dev-qa-db-fra.com

Supprimer le comportement collant de la navigation supérieure sur vingt-quatorze thèmes?

Dans le thème wordpress vingt-quatorze, je me demande comment supprimer le comportement collant de la navigation du haut avec une image d'arrière-plan d'en-tête de 100% de la largeur, comme ce site ?

J'adorerais avoir une image du haut en largeur et une hauteur maximale avec la navigation placée juste en dessous, mais la navigation reste en haut de la fenêtre du navigateur lorsque vous faites défiler l'écran.

J'ai fini par utiliser le .js suivant avec le thème enfant de vingt-treize ans

//$(document).ready(function() {
jQuery().ready(function($) {
var stickyNavTop = $('.navbar').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

et ajouté

 .sticky { position: fixed; z-index: 100; ... }

Merci à un post trouvé ici.

J'aurais pu appliquer la même chose au vingt-quatorze, mais c'était compliqué et je n'avais pas de temps à perdre.

cssheaderstheme-twenty-fourteen
1
cmsdeployed

Avant de répondre à cette question, je pense que vous avez déjà créé un thème - child theme . Raison: Vous devriez jamais apporter des modifications à un thème/plug-in dont vous n'êtes pas l'auteur. Cela inclut les fichiers de base

Avec celui trié, le comportement du menu de navigation est purement contrôlé par js,

  77          /*
  78           * Fixed header for large screen.
  79           * If the header becomes more than 48px tall, unfix the header.
  80           *
  81           * The callback on the scroll event is only added if there is a header
  82           * image and we are not on mobile.
  83           */
  84          if ( _window.width() > 781 ) {
  85              var mastheadHeight = $( '#masthead' ).height(),
  86                  toolbarOffset, mastheadOffset;
  87  
  88              if ( mastheadHeight > 48 ) {
  89                  body.removeClass( 'masthead-fixed' );
  90              }
  91  
  92              if ( body.is( '.header-image' ) ) {
  93                  toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  94                  mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  95  
  96                  _window.on( 'scroll.twentyfourteen', function() {
  97                      if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  98                          body.addClass( 'masthead-fixed' );
  99                      } else {
 100                          body.removeClass( 'masthead-fixed' );
 101                      }
 102                  } );
 103              }
 104          }

que vous pouvez trouver dans functions.js dans le dossier js

Pour supprimer cette fonctionnalité (tout dans votre thème enfant), vous devez retirer de la file d'attente (à l'aide de wp_dequeue_script() ) le fichier functions.js d'origine, à copier le fichier functions.js dans votre thème enfant, à supprimer les lignes mentionnées et à mettre en file d'attente (à l'aide de wp_enqueue_script() ) le js modifié. Cela se fera dans une fonction personnalisée qui sera reliée au wp_enqueue_scripts hook

En code et en pratique

  • Créez un fichier appelé js dans le dossier racine de votre thème enfant.

  • Copiez functions.js et collez-le dans votre dossier js dans votre thème enfant.

  • Ouvrez functions.js et supprimez la ligne que j'ai mentionnée ci-dessus

  • Coffre les fonctions.js

Ouvrez maintenant le fichier functions.php de votre thème enfant et ajoutez-y le code suivant. Cela va retirer le script parent et mettre en file d'attente votre nouveau script modifié

function enqueue_child_functions_js() {

    wp_dequeue_script( 'twentyfourteen-script' ); //dequeue the parent script
    wp_enqueue_script( my-child-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140717', true ); //enqueue new modified script

}

add_action( 'wp_enqueue_scripts', 'enqueue_child_functions_js', 999 );
2
Pieter Goosen

Suite à la réponse de Sepster, le thème de 2014 sur lequel je travaille nécessitait cet ajout supplémentaire (voici la solution complète qui a fonctionné pour moi):

.masthead-fixed .site-header {
  position: relative;
}

@media screen and (min-width: 783px) {
    .admin-bar.masthead-fixed .site-header {
        top:inherit;
    }
}
1
Nicholas Petersen

Dans le thème Twenty Fourteen, la classe masthead-fixed est ajoutée à l'élément <body>.

Le code CSS suivant (ligne 3362) est activé en conséquence:

@media screen and (min-width: 783px)
.masthead-fixed .site-header {
  position: fixed;
  top: 0;
}

Vous pouvez appliquer le CSS suivant à partir de votre thème enfant pour remplacer ceci:

.masthead-fixed .site-header {
  position: relative;
}
1
Sepster