Như trong bài viết Chuyển Menu lên trước hoặc sau Header trong Genesis đã đề cập, việc chuyển Menu thực hiện khá dễ dàng chỉ với một đoạn code đơn giản thực thi trong tập tin functions.php ở Genesis child theme mà bạn đang sử dụng.
Cũng trong bài viết ấy, bạn Hải Triều có thắc mắc làm thế nào để chuyển Menu lên trên sau đó gộp cả Header, tức là Header và Menu trên 1 hàng, bên trái là logo giữa là khung search, bên phải là menu như hình minh họa bên dưới:
Bắt tay thực hiện giải quyết thắc trên nào!!! Đầu tiên thì bạn cần kéo thả 02 widgets là Search và Custom Menu ở Header Right Widget nằm tạo ra khung tìm kiếm và Menu ngang hàng với Logo.
Sau bước này ta thu được kết quả là:
Bước tiếp theo là tùy chỉnh lại các class để phù hợp với giao diện trong Genesis child theme mà bạn đang sử dụng tại tập tin style.css
.
https://gist.github.com/nhatdongnguyen/c17d8e080d4d02fd0ba1
Đoạn mã bên trên đoạn tùy chỉnh thực hiện trên Genesis Sample Theme, bạn có thể tùy chính các class tương tự để phù hợp để đúng như yêu cầu của bạn.
Chúc bạn thành công.
Xét nghiệm ADN says
Đơn giản đến không ngờ! Quá hay luôn.
Mình còn thắc mắc là làm sao để thu nhỏ khung searcbox lại, khi nào nhấn thì mới xuất hiện, giống như ở mấy theme responsive của themeforest. Mình làm mãi vụ này không được.
Nguyễn Nhật Đông says
Cái khung tìm kiếm thu nhỏ, tự động khi click vào gọi la Expandable Search Form.
Bạn áp dụng cài này nhen http://codepen.io/912lab/pen/LsplC.
Hải Triều says
Cám ơn bác nhưng thế này giả sử đạt giá trị fix thì nó lại không kéo theo nguyên cái mảng đó. Em muốn làm thế vì muốn nó kéo theo nguyên mảng luôn :v
Nguyễn Nhật Đông says
Kéo bè kéo cánh cúng không! Có ngay và luôn 😀
Triều tút tát lại CSS như sau:
.site-inner {
clear: both;
padding-top: 100px;
padding-top: 10rem;
}
.site-header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 1000;
}
Xong nhé!
Thủ thuật Blogger says
Cho mình hỏi luôn là menu nãy cũng hỗ trợ responsive menu chứ. Mình đã hiểu cách làm rồi. Có lẽ để vọc và thêm hẳn một menu mới luôn keke
Nguyễn Nhật Đông says
Kiểu này hỏi code mà hem có test lại nà 😀
Đoạn code trên responsive luôn nha Triều!