Cách thêm menu đáp ứng trên thiết bị di động nội tuyến trong Genesis Sample

Thủ thuật WordPress
#1

Trong bài viết này, tôi chia sẻ các bước để

  • loại bỏ khu vực tiện ích con bên phải tiêu đề
  • đặt lại vị trí của menu điều hướng chính từ bên dưới tiêu đề đến tiêu đề bên trong để tiêu đề trang web ở bên trái và menu điều hướng ở bên phải
  • đặt biểu tượng menu bánh hamburger xuất hiện trong dòng nổi ở bên phải khi kích thước màn hình giảm xuống còn 1022px. Khi nhấp / nhấn vào biểu tượng menu, menu chính trượt xuống bên dưới tiêu đề

trong chủ đề con Genesis Sample.

Bước 1

Chỉnh sửa chủ đề con .functions.php

một sự thay đổi

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

đến

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

b) Thêm

// Remove the header right widget area.
unregister_sidebar( 'header-right' );

// Reposition the primary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav' );

// Remove Primary Menu's wrap.
add_theme_support( 'genesis-structural-wraps', array(
    'header',
    // 'menu-primary',
    'menu-secondary',
    'footer-widgets',
    'footer'
) );

Bước 2

Nếu bạn chưa có, hãy tạo và gán menu WordPress cho vị trí chủ đề của Menu điều hướng chính tại Giao diện> Menu.

Bước 3

Thêm phần sau vào cuối trong style.css của Genesis Sample :

.nav-primary {
    border-top: none;
    float: right;
}

@media only screen and (max-width: 1023px) {

    .site-header .wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .title-area {
        width: auto;
    }

    .header-image .title-area {
        float: left;
        width: 100%;
    }

    .menu-toggle {
        width: auto;
        border-top: none;
        float: right;
        margin-top: 16px;
    }

    .menu-toggle,
    .menu-toggle:focus,
    .menu-toggle:hover {
        border-top: none;
    }

    .nav-primary {
        float: none;
        clear: both;
    }

}

@media only screen and (max-width: 860px) {

    .site-header .wrap {
        padding-left: 5%;
        padding-right: 5%;
    }

}

@media only screen and (max-width: 500px) {

    .title-area,
    .menu-toggle {
        float: none;
        width: 100%;
    }

    .header-image .title-area {
        float: none;
        overflow: hidden;
    }

}