Thêm biểu trưng vào đầu menu điều hướng trong chủ đề Genesis Child

Tiêu đề trang web thường khá nhỏ gọn với logo và điều hướng chia sẻ khu vực tiêu đề. Các chủ đề con của Genesis có khu vực tiện ích Header Right cho phép bạn thêm Menu tùy chỉnh vào tiêu đề của trang web WordPress của bạn. Nhưng điều gì sẽ xảy ra nếu bạn muốn logo nằm trên đầu menu điều hướng có chiều rộng đầy đủ để có hiệu ứng ruy-băng? Một ví dụ đáng yêu về điều này là trang web của Vanilla Bake Shop.

Hướng dẫn hôm nay chỉ cho bạn một kỹ thuật để thêm biểu trưng của bạn lên trên thanh điều hướng chính trong chủ đề con mẫu của Genesis - hình ảnh bên dưới. Nó rất cơ bản và tất nhiên, bạn sẽ muốn thêm một số kiểu bổ sung để tạo hiệu ứng ruy băng trang trí. Bạn có thể xem các đường viền trang trí này bằng CSS để giúp bạn tạo kiểu cho logo của mình trên đầu ruy-băng menu điều hướng.

Bước 1. Cài đặt Chủ đề Genesis

Trong Cài đặt Chủ đề Genesis từ Bảng điều khiển WordPress của bạn, trong phần Tiêu đề, nó cho biết “Sử dụng cho tiêu đề / biểu trưng trang web:” và bạn muốn chọn “Biểu trưng hình ảnh”.

Bước 2. Di chuyển Điều hướng Chính của Genesis Trước Tiêu đề

Bạn có thể di chuyển điều hướng chính của mình lên trên vùng tiêu đề. Mở chủ đề con Genesis functions.php trong trình soạn thảo văn bản và thêm mã này vào cuối tệp.

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

Bước 3. Thêm kiểu để di chuyển biểu trưng lên đầu menu điều hướng

Mở style.css chủ đề con của bạn trong trình soạn thảo văn bản. Bạn cũng có thể thêm CSS này vào một plugin trình chỉnh sửa CSS tùy chỉnh, nếu bạn muốn. Giải thích về tất cả CSS nằm ở cuối hướng dẫn này.

Bạn có thể thêm CSS này ngay trước phần Truy vấn phương tiện.

/* 
Logo on top of Primary Nav
------------------------------------- */

.site-inner {
	padding-top: 80px;
	padding-top: 8rem;
}

.header-image .site-description {
	display: none;
	height: 0;
}

.header-image .site-header,
.header-image .site-header .wrap {
	background: none;
	padding: 0;
}

.header-image .site-title a {
	float: left;
	min-height: 164px;
	background: url(images/logo.png) no-repeat left;
	border: 1px solid #333;
	padding: 0;
	display: block;
	top: 40px;
	position: absolute;
	width: 360px;
}

.site-header .widget-area {
	display: none;
	height: 0;
}

/* Primary Navigation */
.nav-primary {
	background-color: #333;
	margin-top: 44px;
}

.nav-primary .genesis-nav-menu {
	float: right;
	width: auto;
	margin-left: 360px;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: left;
}

.nav-secondary {
	margin-top: 40px;
}

Bước 4. Thêm kiểu cho logo căn giữa cho điện thoại di động

Nhiều chủ đề con của Genesis có biểu trưng và điều hướng ở giữa ở kích thước màn hình nhỏ hơn. Đối với hướng dẫn này, bạn có thể thêm một số CSS để giữ giao diện chính giữa giống như chủ đề con mẫu mặc định. Bạn cũng có thể thêm menu điều hướng trên điện thoại di động để giữ hiệu ứng dải băng cho điện thoại di động.

Tìm phần này trong phần Truy vấn Phương tiện:

@media only screen and (max-width: 1023px) {
[...]
}

Thêm CSS sau vào cuối phần truy vấn phương tiện này ngay trước dấu ngoặc đóng -}.

/* 
Logo Centered Again
------------------------------------- */

.site-inner {
	padding-top: 40px;
	padding-top: 4rem;
}

.header-image .site-header .wrap {
	background-position: none;
}

.header-image .site-title {
	margin: 0;
}

.header-image .site-title a {
	border: 0;
	float: none;
	background: url(images/logo.png) no-repeat center top;
	position: relative;
	margin: 0 auto;
	max-width: 360px;
}

.nav-primary {
	margin-top: 0;
}

.nav-primary .genesis-nav-menu {
	float: none;
	margin-left: 0;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: none;
}

.nav-secondary {
	margin-top: 0;
}

Và bạn đã có nó - một khởi đầu tốt cho một giao diện mới cho tiêu đề và điều hướng trang web của bạn.

Giải thích về CSS trong Bước 3

Thao tác này sẽ di chuyển vùng nội dung xuống dưới, do đó có khoảng đệm giữa nội dung và biểu trưng. Bạn có thể không cần thêm phần đệm, đặc biệt nếu bạn cũng đang sử dụng menu điều hướng phụ.

.site-inner {
	padding-top: 80px;
	padding-top: 8rem;
}

CSS này giữ cho mô tả trang web không hiển thị.

.header-image .site-description {
	display: none;
	height: 0;
}

Phần này xóa biểu trưng hình ảnh mặc định khỏi ‘.header-image .site-header .wrap’, đồng thời cũng xóa bất kỳ phần đệm thừa nào.

.header-image .site-header,
.header-image .site-header .wrap {
	background: none;
	padding: 0;
}

CSS này thêm logo, định vị và thêm đường viền xung quanh nó; bạn có thể không muốn biên giới. Chiều cao tối thiểu là chiều cao của biểu trưng và chiều rộng là chiều rộng của biểu trưng. ‘Top: 40px;’ sẽ cần được điều chỉnh để phù hợp với logo của bạn.

.header-image .site-title a {
	float: left;
	min-height: 164px;
	background: url(images/logo.png) no-repeat left;
	border: 1px solid #333;
	padding: 0;
	display: block;
	top: 40px;
	position: absolute;
	width: 360px;
}

Phần tiếp theo chỉ cần đảm bảo rằng khu vực tiện ích Header Right không hiển thị.

.site-header .widget-area {
	display: none;
	height: 0;
}

Bây giờ chúng ta hãy xem xét CSS điều hướng. Phần đầu tiên chỉ thêm màu nền vào điều hướng và thêm lề ở trên cùng. Bạn có thể điều chỉnh màu nền và lề để phù hợp với biểu trưng của mình.

.nav-primary {
	background-color: #333;
	margin-top: 44px;
}

Phần tiếp theo thêm lề trái vào điều hướng chính để các mục menu không trượt bên dưới biểu trưng. Lề ít nhất phải bằng chiều rộng của logo của bạn. Nó cũng giữ điều hướng ở bên phải.

.nav-primary .genesis-nav-menu {
	float: right;
	width: auto;
	margin-left: 360px;
}

Điều này làm nổi từng mục menu sang bên trái.

.nav-primary .genesis-nav-menu .menu-item {
	float: left;
}

Và cuối cùng, nếu bạn sử dụng điều hướng phụ, bạn muốn nó ở bên dưới logo, vì vậy hãy thêm một lề trên.

.nav-secondary {
	margin-top: 40px;
}

Giải thích về CSS trong Bước 4

CSS này di chuyển vùng nội dung trở lại vị trí mặc định, nếu bạn đã thêm nhiều phần đệm trên cùng ở Bước 3.

.site-inner {
	padding-top: 40px;
	padding-top: 4rem;
}

Điều này điều chỉnh CSS của logo để nó được căn giữa, như trong mặc định. Nó cũng loại bỏ đường viền xung quanh logo; bạn có thể xóa dòng đó nếu bạn muốn giữ lại đường viền.

.header-image .site-title a {
	border: 0;
	float: none;
	background: url(images/logo.png) no-repeat center top;
	position: relative;
	margin: -40px auto 0;
}

Các kiểu điều hướng này chỉ xóa các kiểu bạn đã thêm vào biểu trưng và điều hướng ở trên, để biểu trưng được căn giữa bên dưới điều hướng chính.

.nav-primary {
	margin-top: 0;
}

.nav-primary .genesis-nav-menu {
	float: none;
	margin-left: 0;
}

.nav-primary .genesis-nav-menu .menu-item {
	float: none;
}

.nav-secondary {
	margin-top: 0;
}

Và đó là phần cuối của phần giải thích CSS, vì vậy bạn có thể bắt đầu.