Các chỉ báo menu phụ trong Genesis

Trước đây, tôi đã viết một bài báo có tiêu đề Thêm chỉ báo menu phụ điều hướng trong Genesis bằng cách sử dụng Font Awesome.

Hướng dẫn này cung cấp các bước để thêm các chỉ báo menu con mà không cần sử dụng Font Awesome trong Genesis.

Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.6.0, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Bước 1

Thêm phần sau vào bên trong truy vấn phương tiện chiều rộng tối thiểu 960px:

.menu-item.menu-item-has-children > a > span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.menu-item.menu-item-has-children > a > span::after {
    /* display: inline-block; */
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-top: 1px solid;
    border-right: 1px solid;
    content: "";
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.sub-menu .menu-item.menu-item-has-children > a > span {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sub-menu .menu-item.menu-item-has-children > a > span::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

Đó là nó!