Biểu trưng trung tâm và menu trong Genesis Sample 2.6

Một tùy chọn phổ biến cho tiêu đề trang web là đặt logo và menu điều hướng vào giữa. Điều này được sử dụng cho rất nhiều trang web dành cho nữ và nhiếp ảnh, nhưng tôi cũng đã thấy các trang web doanh nghiệp nhỏ sử dụng biểu trưng tập trung.

Genesis 2.6 sử dụng công cụ tùy biến WordPress để làm cho việc thêm các biểu trưng có kích thước khác nhau trở nên thực sự dễ dàng - không cần mã! Và đối với các biểu trưng rất rộng, chủ đề sẽ tự động căn giữa biểu trưng và menu.

Nhưng nếu bạn có biểu trưng hình tròn hoặc hình vuông, bạn sẽ muốn thêm một chút CSS để lấy biểu trưng và menu chính giữa.

Thêm hình ảnh biểu trưng của bạn

Tôi đang sử dụng một biểu trưng có kích thước 500px x 500px, nhưng tôi muốn nó hiển thị dưới dạng 250px trong tiêu đề chủ đề. Logo lớn gấp đôi khi cần thiết, vì vậy nó sẽ đẹp và sắc nét trên màn hình retina. Để tải lên biểu trưng, ​​hãy bắt đầu trong Bảng điều khiển WordPress của bạn:
  1. Đi tới Giao diện> Tùy chỉnh và chọn “Nhận dạng trang web”.
  2. Thay đổi “Chiều rộng biểu trưng” thành chiều rộng mà bạn muốn để biểu trưng xuất hiện , vì vậy, đối với biểu trưng này, nó là một nửa chiều rộng 500px, vì vậy 250. Bạn chỉ muốn thêm số.
  3. Tiếp theo, nhấp vào nút “Chọn Biểu trưng” ở trên cùng và chọn biểu trưng từ máy tính của bạn (hoặc Thư viện phương tiện, nếu bạn đã tải lên.) Hãy nhớ nhấp vào nút “Bỏ qua Cắt xén”!
  4. Sau đó nhấp vào nút Xuất bản màu xanh lam ở trên cùng.

Thêm CSS vào đâu

Bạn có thể chỉnh sửa tệp đầu ra của chủ đề, nhưng sau đó bạn sẽ gặp rắc rối nếu bạn thay đổi kích thước biểu trưng của mình. Sử dụng CSS đơn giản hơn nhiều.

Tôi cũng khuyên bạn nên thêm CSS bằng WordPress Customizer. Từ Bảng điều khiển WordPress của bạn, hãy nhấp vào: Giao
diện> Tùy chỉnh và sau đó nhấp vào “CSS bổ sung”.

Bạn cũng có thể thêm CSS này ở cuối tệp theme style.css, nếu bạn thích và biết cách thực hiện.

Tất cả CSS đều có trong GitHub Gist này.

Biểu trưng trung tâm và Menu trên cả màn hình lớn và màn hình nhỏ Màn hình
lớn sẽ giống như hình ảnh ở đầu bài đăng này; màn hình nhỏ sẽ giống như hình dưới đây.

Để căn giữa biểu trưng và menu trên cả màn hình lớn và màn hình nhỏ, hãy thêm CSS sau.

/* Center logo and menu on large and small screens. */
.wp-custom-logo .title-area,
.wp-custom-logo .menu-toggle,
.wp-custom-logo .nav-primary {
	float: none;
}

.wp-custom-logo .title-area {
	margin: 0 auto;
	text-align: center;
}

@media only screen and (min-width: 960px) {
	.wp-custom-logo .nav-primary {
		text-align: center;
	}

	.wp-custom-logo .nav-primary .sub-menu {
		text-align: left;
	}
}

Biểu trưng trung tâm và Menu trên Chỉ màn hình lớn Màn hình
lớn sẽ giống như hình ảnh ở đầu bài đăng này; màn hình nhỏ sẽ giống như hình dưới đây.

Nếu bạn muốn đặt biểu trưng và menu ở giữa cho màn hình lớn và cạnh nhau cho màn hình nhỏ, hãy sử dụng CSS này thay vì ở trên.

/* Center logo and menu on only large screens. */
@media only screen and (min-width: 960px) {
	
	.wp-custom-logo .title-area,
	.wp-custom-logo .nav-primary {
		float: none;
	}

	.wp-custom-logo .title-area {
		margin: 0 auto;
		text-align: center;
	}
	
	.wp-custom-logo .nav-primary {
		text-align: center;
	}

	.wp-custom-logo .nav-primary .sub-menu {
		text-align: left;
	}
}

Tiêu đề Không dính
Đối với logo cao hơn, Genesis 2.6 sẽ tự động tắt tiêu đề dính, nhưng bạn cũng có thể tự điều chỉnh điều này.
CSS cần thêm là:

/* No fixed header. */
.site-header {
	position: static;
}

Hãy cho tôi biết trong phần bình luận về cách nó phù hợp với bạn!