Sticky Menu chính là thanh menu sẽ luôn nằm trên cùng cho dù bạn có cuộn chuột xuống bên dưới. Và hôm nay tôi sẽ hướng dẫn các bạn tạo một menu như vậy trên Genesis.
Đầu tiên, các bạn phải tải file .js này về, sau đó cho vào folder js trên Child Theme mà bạn đang sử dụng. Nếu chưa có thì tạo thêm thư mục này.
Đối với Menu Primary: Download
Đối với Menu Secondary: Download
Vì Genesis thường hỗ trợ 2 loại menu là Primary và Secondary, bạn muốn làm menu nào cố định thì download file js đối với loại menu đó. Thường Primary là menu phía trên và Secondary là menu phía dưới. Như của ChiaseWP đang sử dụng là Secondary.
Sau đó các bạn thêm đoạn code sau vào file functions.php.
add_action( 'wp_enqueue_scripts', 'cswp_load_stickybits' );function cswp_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 );}
add_action( 'wp_enqueue_scripts', 'cswp_load_stickybits' );
function cswp_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 );
}
Cuối cùng là thêm Stylesheet cho Sticky Menu.
Đối với Menu Primary:
.nav-primary.js-is-sticky {z-index: 1;}.admin-bar .nav-primary.js-is-sticky { top: 32px !important;}
.nav-primary.js-is-sticky {
z-index: 1;
}
.admin-bar .nav-primary.js-is-sticky {
top: 32px !important;
}
Đối với Menu Secondary:
.nav-secondary.js-is-sticky {z-index: 1;}.admin-bar .nav-seconday.js-is-sticky { top: 32px !important;}
.nav-secondary.js-is-sticky {
z-index: 1;
}
.admin-bar .nav-seconday.js-is-sticky {
top: 32px !important;
}
Và thành quả của chúng ta được.
Các bạn lưu ý là sử dụng đúng file cho đúng menu nhé, không thì không hoạt động được đâu. Nếu có khó khăn gì hãy cho tôi biết ở phần comment nhé. Chúc các bạn thành công.
Nguồn: Việt Hùng admin https://chiasewp.com/ 
Bình Luận