Trong hướng dẫn này, tôi sẽ chỉ ra Stickybits có thể được sử dụng như thế nào, đặc biệt để làm cho thanh nav chính trở nên nổi trên màn hình với độ rộng > 1023px trong Genesis Sample.
Vậy tác dụng của nó sẽ là thế nào?
Ở mặc định của 1 số theme thì khi ta kéo xuống hết phần nav thì sẽ bị che hết phần này, nó chỉ hiển thị trong khu vực nav khi ta kéo đến, vậy khi đọc xong một bài viết muốn quay sang chuyên mục khác, sẽ phải cuộn lên đầu trang để click vào trang chủ hay, thư mục khác…Rất bất tiện.
Bài viết này sẽ hướng dẫn cách làm thế nào để thanh nav nổi trên màn hình genesis theme.
Đây là thanh nav mặc định của theme genesis sample.
Trước khi theo tác:
Sau khi thao tác:
Giờ đây khi kéo xuống cuối thanh nav này vẫn hiển thị trên màn hình.
Trong hướng dẫn này được viết cho Genesis Sample, nên nó làm việc trong bất kỳ giao diện nào của wordpress.
Bước 1: Tải lên file jquery.stickybits.min tới thư mục js của child theme.
Bước 2: Tạo một tệp có tên stickybits-init trong thư mục js code bên dưới.
jQuery(function($){
if ( $(window).width() > 1023 ) {
$('.nav-primary').stickybits({
useStickyClasses: true,
});
}
});
Bước 3: Dán code này vào cuối file functions.php trong child theme.
// Enqueue Stickybits and initialize it.
add_action( 'wp_enqueue_scripts', 'sk_load_stickybits' );
function sk_load_stickybits() {
wp_enqueue_script( 'stickybits', get_stylesheet_directory_uri() . '/js/jquery.stickybits.min.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
wp_enqueue_script( 'stickybits-init', get_stylesheet_directory_uri() . '/js/stickybits-init.js', array( 'stickybits' ), CHILD_THEME_VERSION, true );
}
Bước 4: Thêm thuộc tính CSS vào style.css.
.nav-primary.js-is-sticky {
border-bottom: 1px solid #eee;
}
.admin-bar .nav-primary.js-is-sticky {
top: 32px !important;
}
Kết quả:
