Chỉ thêm biểu tượng menu đáp ứng vào menu điều hướng chính của Genesis

Hầu hết các chủ đề Genesis hiện bao gồm menu điều hướng đáp ứng cho kích thước màn hình nhỏ hơn và một số thêm biểu tượng menu đáp ứng vào một số vị trí menu - tiêu đề, chính và phụ.

Có lẽ bạn cần sử dụng hai menu, nhưng bạn chỉ có một số mục menu trong điều hướng tiêu đề, chẳng hạn như tài khoản và thông tin đăng nhập khu vực thành viên của bạn hoặc đối với một cửa hàng, chỉ cần đăng nhập tài khoản và giỏ hàng. Bạn có thể không bao giờ muốn ẩn thành viên, tài khoản và các mục trong menu giỏ hàng; bạn muốn chúng luôn có thể truy cập được, như hình trên.

Các chủ đề Executive Pro và Enterprise Pro thêm biểu tượng menu đáp ứng vào cả menu điều hướng chính và tiêu đề. Nhưng bạn có thể chỉnh sửa tệp chủ đề có thêm biểu tượng menu đáp ứng để nó chỉ thêm vào điều hướng chính.

(Bạn có thể thực hiện các thay đổi khác đối với các menu đáp ứng Genesis của mình, chẳng hạn như sử dụng một biểu tượng menu đáp ứng cho hai vị trí menu.)

Hiện tại, chúng tôi muốn để menu tiêu đề như nó dành cho màn hình lớn, nhưng để menu điều hướng chính có thể phản hồi, vì vậy hãy bắt đầu.

Bước 1. Tìm tệp jQuery để chỉnh sửa

Trong thư mục chủ đề của bạn, hãy tìm thư mục / js. Inside / js là một tệp có tên responsive-menu.js trong Executive Pro và Enterprise Pro; menu có thể được bao gồm trong một tệp .js khác cho các chủ đề khác.

Bước 2. Tìm các lớp điều hướng

Ba menu điều hướng khác nhau được xác định trong tệp .js bằng cách:
  • Tiêu đề - header .genesis-nav-menu
  • Điều hướng phụ - .nav-secondary .genesis-nav-menu
  • Định hương đâu tiên - .nav-primary .genesis-nav-menu
Và các lớp này được sử dụng ba lần trong tệp .js.

Bước 3. Loại bỏ các lớp điều hướng không mong muốn

  • Nếu bạn không muốn thêm biểu tượng menu đáp ứng vào menu tiêu đề, bạn sẽ tìm và xóa cả ba phiên bản của header .genesis-nav-menu
  • Nếu bạn không muốn thêm biểu tượng menu đáp ứng vào menu phụ, bạn sẽ tìm và xóa cả ba phiên bản của .nav-secondary .genesis-nav-menu
  • Nếu bạn không muốn thêm biểu tượng menu đáp ứng vào menu chính (nhưng bạn muốn biểu tượng này cho tiêu đề hoặc phụ), bạn sẽ tìm và xóa cả ba phiên bản của .nav-primary .genesis-nav-menu
Lưu tệp responsive-menu.js của bạn.

Bước 4. Thêm biểu tượng vào Chỉ điều hướng chính

Vì vậy, đối với các chủ đề Executive Pro và Enterprise Pro, bạn sẽ xóa header .genesis-nav-menu, để đáp ứng cuối cùng-menu.js là:
jQuery(function( $ ){
$(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

$(".responsive-menu-icon").click(function(){
	$(this).next(".nav-primary .genesis-nav-menu").slideToggle();
});

$(window).resize(function(){
	if(window.innerWidth > 800) {
		$(".nav-primary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
		$(".responsive-menu > .menu-item").removeClass("menu-open");
	}
});

$(".responsive-menu > .menu-item").click(function(event){
	if (event.target !== this)
	return;
		$(this).find(".sub-menu:first").slideToggle(function() {
		$(this).parent().toggleClass("menu-open");
	});
});

});


À chính nó đấy; bạn đã hoàn thành.

Hình ảnh đầu tiên trong bài đăng này có các menu được tạo kiểu giống như bạn thường thấy để đăng nhập thành viên hoặc cửa hàng và giỏ hàng, nhưng bạn có thể thêm bất kỳ kiểu nào bạn thích.