Tiếp tục loạt bài viết hướng dẫn tùy chỉnh childthemes của Genesis bằng css đã gián đoạn khá lâu, hôm nay mình sẽ hướng dẫn cách tùy chỉnh cho phần menu của Genesis bao gồm nav và subnav. Theme mẫu mình sử dụng là copyblogger, một childtheme miễn phí của Genesis.

Xem thêm: tùy chỉnh header cho Genesis Childthemes

nav va subnav trong genesis

Thay đổi vị trí subnav

Mặc định của theme copyblogger thì subnav nằm ngay bên dưới nav menu như hình bên trên. Nếu bạn không muốn đặt subnav nằm tại vị trí đó mà muốn chuyển nó lên đầu trang, chỉ cần sử dụng đoạn code dưới đây chèn vào file functions.php.

Kết quả ta sẽ được như thế này:

doi vi tri subnav
Bạn có thể làm tương tự nếu muốn đổi vị trí của nav menu, chỉ cần thay subnav bằng nav trong đoạn code trên.

Xem thêm: Top Navigation cho Genesis Childthemes

Tiếp theo, mình sẽ thực hiện các thay đổi cho nav menu, tất cả việc này sẽ thực hiện trên id #nav trong file style.css của childtheme bạn sử dụng. Nếu bạn muốn tùy chỉnh cho subnav menu, chỉ cần thực hiện tương tự với id #subnav.

Đổi màu nền cho nav menu

Tìm lớp #nav  trong file style.css, thay đổi thuộc tính background của lớp này. Chẳng hạn như dưới đây:

Kết quả ta được như thế này:

thanh doi mau nen

Đổi màu nền và màu chữ cho từng item trên menu

Để đổi màu cho từng mục trên menu, ta thay đổi thuộc tính backgroundcolor của lớp #nav li a.

doi mau item trong menu
Bạn có thể thay đổi các thông số của thuộc tính padding và thêm thuộc tính margin vào lớp css trên để thay đổi khoảng các giữa các mục.

Tiếp theo để thay đổi màu của item khi rê chuột và khi click, ta sẽ sửa đổi thuộc tính background và color của các lớp #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a.

Và đầy là kết quả đạt được:

mau menu khi re chuot

Bạn có thể rê chuột lên từng mục để xem màu sắc thay đổi. Bạn cũng có thể tách ra thành nhiều lớp cssriêng biệt nếu muốn màu menu khi rê chuột và khi click khác nhau.

Ngoài ra, bạn có thể thay đổi thuộc tính của các lớp #nav li li a#nav li ul…để tùy chỉnh cho sub menu nếu muốn. Hy vọng bài viết này sẽ giúp bạn biết cách tùy chỉnh cho menu trong Genesis childthemes theo ý thích của mình. Nếu gặp khó khăn, hãy để lại comment bên dưới bài viết này nhé. Chúc bạn thành công!

Leave a Reply

Your email address will not be published. Required fields are marked *

Đăng ký nhận tin khuyến mãi

Đăng ký nhận tin khuyến mãi

Không bỏ lở những khuyến mãi Hosting - Domain - WordPress Themes - WordPress Plugins hấp dẫn nhất!

 

Bạn đã đăng ký thành công!