Menu con nằm ngang trong Genesis

Thủ thuật WordPress
1

Tìm cách hiển thị các mục menu con theo chiều ngang khi di chuột qua một mục menu trong Genesis?

Chúng tôi có thể đặt là rộng 100% và được neo ở bên phải để các mục trong menu con xuất hiện toàn chiều rộng với mục đầu tiên trong menu con được căn chỉnh ở mép trái của màn hình..sub-menu

Mẹo để làm cho mục đầu tiên trong menu con căn chỉnh với mục đầu tiên trong điều hướng chính là tạo cho nó một phần đệm bằng chiều rộng khung nhìn trừ đi một nửa chiều rộng bao bọc. Điều này có thể được thực hiện thông qua

padding-left: calc(50vw - (1280px/2) )

trong đó 1280px là chiều rộng của bọc.

Đã thử nghiệm trong Genesis Sample 2.3.0 với menu điều hướng được chỉ định cho vị trí chủ đề “After Header Menu” (hoặc Điều hướng chính). Sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Thêm phần sau vào style.css của chủ đề con :

@media only screen and (min-width: 1024px) {
    .genesis-nav-menu li a:hover {
        text-decoration: none;
    }

    .genesis-nav-menu > li:hover > a,
    .genesis-nav-menu > li > a:hover {
        color: #106ccc;
    }

    .genesis-nav-menu .sub-menu {
        right: 0;
        width: 100%;
        padding-left: calc(50vw - (1280px/2) ); /* where 1280px is the width of the wrap */
        border-top: none;
        background-color: #106ccc;
        font-size: 0.001px; /* to get rid of the horizontal gap between menu items */
    }

    .genesis-nav-menu .sub-menu a {
        border: none;
        color: #fff;
        background-color: transparent;
    }

    .genesis-nav-menu .sub-menu a:hover {
        background-color: #0c539d;
    }
}