Cách di chuyển menu điều hướng phụ bên dưới tiêu đề trang web trong Genesis Sample

Hướng dẫn này cung cấp các bước để di chuyển menu được gán cho vị trí Điều hướng phụ từ chân trang đến đầu trang bên dưới trong Genesis Sample 2.6.0.

Bước 1

Chỉnh sửa các functions.php của Genesis Sample .

a) Thay đổi nhãn cho secondary vị trí menu từ sang .Footer Menu Secondary Navigation

tức là, thay đổi

// Renames primary and secondary navigation menus.
add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Footer Menu', 'genesis-sample' ),
    )
);

đến

// Renames primary and secondary navigation menus.
add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Secondary Navigation', 'genesis-sample' ),
    )
);

b) Xóa mã chuyển vị trí menu điều hướng phụ.

Nhận xét ra hoặc xóa

remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 10 );

c) Nếu bạn muốn kết hợp menu điều hướng chính và phụ vào bánh hamburger có chiều rộng nhỏ hơn, hãy thay đổi

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

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

    return $settings;

}

đến

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

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

    return $settings;

}

Bước 2

Thay đổi bộ chọn trong tệp Javascript sẽ tự động lấy lề trên cùng bằng chiều cao của tiêu đề trang web.

Trong js / genesis-sample.js thay đổi

$('.site-inner').css('margin-top', siteInnerMarginTop);

đến

$( '.nav-secondary' ).css( 'margin-top', siteInnerMarginTop );

Bước 3

Loại bỏ lề trên cho ..site-inner

Trong style.css , bên trong thay đổi truy vấn phương tiện chiều rộng tối thiểu 960px

.site-inner {
    margin-top: 70px;
    max-width: 1140px;
}

đến

.site-inner {
    margin-top: 0;
    max-width: 1140px;
}