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;
}
}