Удалить липкое поведение из верхней навигации по двадцать четырнадцати темам?

В теме wordpress двадцать четыренадцать, мне интересно, как удалить липкое поведение верхней навигации с фоновым изображением заголовка ширины 100%, как этот сайт ?

Я хотел бы иметь верхнее изображение с полной шириной и максимальной высотой с расположенной под ним навигацией, но при прокрутке вниз навигационная панель переходит в верхнюю часть окна браузера.

Я закончил тем, что использовал следующие .js с двадцатью четырнадцатью дочерней темой

//$(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(); }); }); 

и добавил

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

Благодаря сообщению, найденному здесь.

Я мог бы применить то же самое к двадцать четвертому, но это было сложно, и у меня не было времени тратить время.

Solutions Collecting From Web of "Удалить липкое поведение из верхней навигации по двадцать четырнадцати темам?"

Прежде чем ответить на этот вопрос, я считаю, что вы уже создали дочернюю тему . Причина. Вы никогда не должны вносить какие-либо изменения в тему / плагин, который вы не являетесь автором. Сюда входят основные файлы

С учетом этого поведение навигационного меню в чисто управляемом 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 } 

который вы можете найти в functions.js в папке js

Чтобы удалить эту функциональность (все в вашей дочерней теме), вам необходимо удалить (используя wp_dequeue_script() ) исходные функции wp_dequeue_script() , скопировать функции .js в вашу wp_dequeue_script() тему и удалить указанные строки и вставить в очередь (используя wp_enqueue_script() ) модифицированные js. Это будет сделано внутри пользовательской функции, которая будет подключена к wp_enqueue_scripts hook

В коде и на практике

  • Создайте файл js в корневой папке вашей дочерней темы.

  • Скопируйте функции.js и вставьте его в папку js в дочерней теме

  • Откройте functions.js и удалите строку, указанную выше

  • Безопасный функции .js

Теперь откройте функцию child.php вашей дочерней темы и добавьте туда следующий код. Это приведет к отмене родительского скрипта и внесению в очередь нового измененного скрипта

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

В теме «Двадцать четырнадцать» класс, masthead-fixed в masthead-fixed добавляется в элемент <body> .

В результате приводится следующий CSS (строка 3362):

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

Вы можете применить следующий CSS из своей дочерней темы, чтобы переопределить это:

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

Работая с ответом Сепстера, тема 2014, над которой я работаю, нуждается в этом дополнительном дополнении (вот полное решение, которое сработало для меня):

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