Cách làm cho menu điều hướng phụ đáp ứng trên thiết bị di động trong Genesis

Trong phần nhận xét của Cách thêm menu di động đáp ứng trước chân trang trong Focus Pro, một người dùng đã hỏi:

Tôi cần thêm một menu tương tự như menu trong hướng dẫn này và có vẻ như không hoạt động với chủ đề mẫu hiện tại - Tôi nghĩ đó là vì mã đáp ứng khác với chủ đề mẫu hiện tại, hiện đang kết hợp tiêu đề chính + tiêu đề ( khu vực tiện ích) menu và giao dịch với khả năng tiếp cận. Vậy hướng dẫn này sẽ thay đổi như thế nào để tính đến những điều đó?

Khá đơn giản để có được menu hamburger có thể truy cập hoạt động cho .nav-Secondary trong Genesis Sample 2.3 . Tất cả những gì chúng ta phải làm là chuyển lớp của menu nav làm giá trị cho others khóa trong mảng $ settings bên trong functions.php.genesis_sample_responsive_menu_settings()

tức là, thay đổi

// Define our responsive menu settings.
function genesis_sample_responsive_menu_settings() {

    $settings = array(
        'mainMenu'          => __( 'Menu', 'genesis-sample' ),
        'menuIconClass'     => 'dashicons-before dashicons-menu',
        'subMenu'           => __( 'Submenu', 'genesis-sample' ),
        'subMenuIconsClass' => 'dashicons-before dashicons-arrow-down-alt2',
        'menuClasses'       => array(
            'combine' => array(
                '.nav-primary',
                '.nav-header',
            ),
            'others'  => array(),
        ),
    );

    return $settings;

}

đến

// Define our responsive menu settings.
function genesis_sample_responsive_menu_settings() {

    $settings = array(
        'mainMenu'          => __( 'Menu', 'genesis-sample' ),
        'menuIconClass'     => 'dashicons-before dashicons-menu',
        'subMenu'           => __( 'Submenu', 'genesis-sample' ),
        'subMenuIconsClass' => 'dashicons-before dashicons-arrow-down-alt2',
        'menuClasses'       => array(
            'combine' => array(
                '.nav-primary',
                '.nav-header',
            ),
            'others'  => array( '.nav-secondary' ),
        ),
    );

    return $settings;

}

Lưu ý: Để loại bỏ đường viền trên cùng phía trên biểu tượng menu, hãy thêm style.css

.site-footer .menu-toggle {
    border-top: none;
}

bên trên

.menu-toggle,
.menu-toggle:focus,
.menu-toggle:hover {
    border-top: 1px solid #eee;
}

trong truy vấn phương tiện 1023px.