Thêm các nút vào biểu tượng và chỉ báo menu đáp ứng Genesis

Các menu đáp ứng trong các chủ đề của Genesis đã được cập nhật (mùa hè năm 2014) và hiện dễ sử dụng hơn trên thiết bị di động, đặc biệt nếu có một số lượng lớn các mục menu trong menu thả xuống.

Giao diện của menu đáp ứng Genesis rất đẹp và sạch sẽ, nhưng một số người không chắc chắn nên nhấp vào đâu khi họ lần đầu tiên nhìn thấy menu này. Để làm cho nơi nhấp chuột rõ ràng hơn một chút, biểu tượng menu đáp ứng và các chỉ báo mũi tên thả xuống có thể được làm cho trông giống các nút hơn chỉ với một chút CSS.

Chủ đề được sử dụng cho hướng dẫn này là Enterprise Pro, nhưng CSS tương tự có thể được sử dụng cho nhiều chủ đề chuyên nghiệp hiện tại.

Biểu tượng menu đáp ứng

Đây là cách nó sẽ trông.

Đầu tiên, hãy tìm phần, Menu đáp ứng.
Trong phần đó làresponsive-men-icon::before:

.responsive-menu-icon::before {
	content: "\f333";
	display: block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

Bạn có thể chỉnh sửa CSS thành:

.responsive-menu-icon::before {
	background-color: #444;
	border-radius: 2px;
	content: "\f333";
	display: inline-block;
	font: normal 30px/1 'dashicons';
	margin: 6px auto;
	padding: 6px 20px;
}

Đây là những thay đổi mà bạn có thể thực hiện:

  • thêm màu nền khác với menu, background-color: #444;
  • thêm một số bán kính đường viền (tùy chọn), padding: 6px 20px;
  • thêm một số lề trên và dưới, margin: 6px auto;
  • giảm phần đệm trên và dưới một chút (tùy chọn), padding: 6px 20px;
  • và bạn cũng có thể làm cho biểu tượng lớn hơn một chút (tùy chọn), font: normal 30px/1 'dashicons';

Trình đơn đáp ứng Genesis (phần @media)

Đây là menu đáp ứng Genesis ban đầu khi một mục menu được mở rộng.

Tiếp theo, bạn muốn tìm phần thêm CSS cho menu đáp ứng trên thiết bị di động. Đối với Enterprise Pro, nó
@media only screen and (max-width: 768px) {

Trong phần đó, hãy tìm

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
	content: "\f347";
	float: right;
	font: normal 16px/1 'dashicons';
	height: 16px;
	padding: 15px 20px;
	right: 0;
	text-align: right;
	z-index: 9999;
}

Thực hiện các chỉnh sửa này:

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
	background-color: #444;
	border-radius: 2px;
	content: "\f347";
	float: right;
	font: normal 16px/1 'dashicons';
	height: 16px;
	margin: 6px 0;
	padding: 10px 20px;
	right: 0;
	text-align: right;
	z-index: 9999;
}

Những thay đổi bạn có thể thực hiện tương tự như những thay đổi bạn đã thực hiện cho biểu tượng menu đáp ứng:

  • thêm màu nền khác với menu, background-color: #444;
  • thêm một số bán kính đường viền (tùy chọn), border-radius: 2px;
  • thêm một số lề trên và dưới, margin: 6px 0;
  • giảm phần đệm trên và dưới một chút, padding: 10px 20px;
Nếu bạn muốn thêm các dòng để tách các mục menu, bạn có thể tìm thấy phần này:
.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
	display: block;
}
và thêm đường viền, và tùy chọn thêm một chút đệm vào các mục menu.
.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
	border-bottom: 1px solid #222;
	display: block;
	padding: 0 20px;
}
Nếu bạn đã sử dụng hướng dẫn để thêm chỉ báo mũi tên cho menu trên màn hình, thì bạn cũng sẽ cần thêm phần này:
.genesis-nav-menu > .menu-item-has-children > a:after {
     content: "";
}
Nếu bạn muốn, bạn có thể chỉnh sửa phần đệm, vì vậy nó giống nhau cho tất cả các mục trong menu. Vì vậy, hãy tìm phần này:
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
	padding: 12px 20px;
	position: relative;
	text-transform: none;
	width: 100%;
}
Và chỉnh sửa phần đệm để phần này là:
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
	padding: 16px 20px;
	position: relative;
	text-transform: none;
	width: 100%;
}
Bạn có thể muốn thực hiện một số thay đổi kiểu khác, nhưng hướng dẫn này cung cấp những điều cơ bản để giúp bạn bắt đầu thêm các nút vào các biểu tượng menu đáp ứng và mũi tên chỉ báo của mình.