TOP CÁC NHÀ CUNG CẤP HOSTING NÊN DÙNG

Tùy chỉnh menu cho Genesis child themes

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!

Tùy chỉnh menu cho Genesis child themes
Đánh giá bài viết này

HOT - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

Comments

  1. Mình cũng đang học hỏi về Genesis hy vọng học được thêm nhiều kinh nghiệm từ bạn.

  2. Trang thuốc cường dương này của mình cũng đang xài Genesis
    Cám ơn bài viết này nhé

  3. bạn Bảo ơi mình cũng dùng genesis. site của mình có 2 menu, ở trên thì dài, ở dưới thì ngắn. Mình muốn cái secmenu ở dưới của mình nó cũng dài như cái primenu ở trên thì thêm đoạn code như nào hả bạn? Nếu được bạn chỉ chi tiết giúp mình với nhé vì mình không biết gì về code. Cảm ơn Bảo và chúc bạn nhiều thành công

  4. bài viết hữu ích, Giúp người mới làm quen với genesis chỉnh sửa theme theo ý thích của riêng mình. Mình đang dùng magazine pro theme cũng tương tự như vầy!

  5. bài viết hay quá, công nhận là tùy chỉnh wp khó thật, e dùng mãi mà chưa nắm hết đc

  6. wp của e bị ẩn plugin có cách nào cho nó hiện ra để m thêm ko
    http://domucmayintainha24h.com/do-muc-may-in-canon/

  7. Cậu ơi! Sao mình tuỳ biến CSS mà nó chẳng thay đổi gì vậy :(!

  8. anh ơi,
    Em chỉnh cả đêm mà vẫn không được.
    .genesis-nav-menu {
    clear: both;
    background: #33495d;
    font-family: ‘Raleway’, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    width: 100%;
    }

    .genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
    }

    .genesis-nav-menu a {
    border: none;
    color: #33495d;
    display: block;
    padding: 25px 20px;
    position: relative;
    anh xem giúp em cái này đúng không nha anh.

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!

Đă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!