Tôi đang làm việc trên trang web của khách hàng đang sử dụng Chủ đề Epik. Anh ấy yêu cầu menu đáp ứng và tôi đã làm theo cách này.
Đầu tiên, tạo một tệp JS “ responsive-menu.js ” và đặt trong thư mục “ epik / js ”. Đây là mã JS:
jQuery(function(){
jQuery( ".nav-header .sub-menu" ).before( "" );
jQuery(".responsive-menu").on( "click", function() {
jQuery( ".header-widget-area .widget_nav_menu" ).fadeToggle();
});
jQuery(".sub-menu-toggle").on( "click", function() {
var $this = jQuery( this );
$this.toggleClass( "activated" );
$this.next( ".sub-menu" ).slideToggle();
});
jQuery(window).resize(function() {
if ( window.innerWidth > 960 ) {
jQuery( ".header-widget-area .widget_nav_menu, .sub-menu" ).css('display', 'block');
}else{
jQuery( ".header-widget-area .widget_nav_menu, .sub-menu" ).css('display', 'none');
}
});
});
Thêm CSS Dashicons, responsive-menu.js và tạo đánh dấu Menu đáp ứng ở tiêu đề. Thêm các mã sau vào tệp functions.php
add_action('genesis_header_right', 'epik_responsive_menu');
function epik_responsive_menu(){
echo '<!-- Responsive Menu -->
<div class="responsive-menu hide">
<span class="dashicons dashicons-menu"></span>
</div>';
}
//Search this 'genesis_sample_google_fonts' and replace the code by this new one
function genesis_sample_google_fonts() {
wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_style( 'dashicons' );
wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700', array(), PARENT_THEME_VERSION );
}
Thêm CSS sau vào tệp style.css
.hide, .sub-menu-toggle {
display: none;
}
@media only screen and (max-width: 960px) {
.header-image .site-header,
.header-image .site-header .wrap {
background-position: left top !important;
}
.site-header .widget_nav_menu {
display: inline-block;
width: 100%;
}
.header-image .site-header .widget-area{
float: none;
}
.responsive-menu {
color: #d2d2d2;
cursor: pointer;
display: block;
margin: 0;
padding: 13px 0 0;
position: relative;
right: 0;
text-align: right;
top: 0;
width: auto;
}
.responsive-menu .dashicons,
.responsive-menu .dashicons-before:before{font-size: 32px; width: 30px; height: 30px;}
.header-widget-area .widget_nav_menu{display: none; margin-top: 30px;}
.site-header .widget-area{text-align: left;}
.site-header .genesis-nav-menu .menu-item{display:block; position: relative;}
.site-header .genesis-nav-menu .menu-item:hover {position: relative;}
.site-header .genesis-nav-menu a { padding: 15px 0 15px 20px; border-left: none; border-top: 1px solid #4b4b4b; text-align: left; }
.site-header .genesis-nav-menu .sub-menu { clear: both; display: none; opacity: 1; filter: alpha(opacity=100); position: static; width: 100%; }
.site-header .genesis-nav-menu .sub-menu a,
.site-header .genesis-nav-menu .sub-menu li:last-child a { background: none; border-width: 1px 0 0; position: relative; padding-left: 40px; width: auto; }
.sub-menu-toggle, .sub-menu-toggle:hover {
background: none!important;
color: #afafaf!important;
display: block;
font-size: 12px;
font-size: 1.2rem;
font-weight: 300;
font-family: 'Dashicons';
margin: 0 auto;
overflow: hidden;
padding: 7px 18px;
position: absolute;
right: 0;
top: 10px;
text-align: center;
visibility: visible;
}
.sub-menu-toggle:before { content: "\f347"; font-family: 'Dashicons'; }
.sub-menu-toggle.activated:before { content: "\f343"; font-family: 'Dashicons'; }
}
Thay thế một số CSS hiện có bằng CSS mới này
Chuyển đến dòng số 3985 và thay thế bằng dòng này
.content,
.content-sidebar-sidebar .content,
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content,
.sidebar-sidebar-content .content-sidebar-wrap,
.wrap {
width: 100%;
}
Chuyển đến dòng số 3985 và xóa toàn bộ CSS này
.header-image .site-header,
.header-image .site-header .wrap {
background-position: center top !important;
}
Bây giờ tất cả đã được thực hiện. Chỉ cần làm mới trang chủ và bạn sẽ nhận được menu đáp ứng cho các thiết bị nhỏ.