Cách luôn hiển thị menu đáp ứng trong Genesis Sample

Thủ thuật WordPress
1

Trong nhóm Facebook Genesis, một người dùng hỏi:

Chào mọi người,

Sử dụng chủ đề con Genesis Sample và tôi muốn luôn hiển thị menu điều hướng trên thiết bị di động - ngay cả trên máy tính để bàn. Tôi đang gặp khó khăn trong việc tìm kiếm một hướng dẫn cho điều đó. Cảm ơn!

Và câu trả lời là chỉ cần xóa CSS có liên quan trong truy vấn phương tiện chiều rộng tối thiểu 960px.

Trong style.css, hãy cuộn xuống truy vấn phương tiện chiều rộng tối thiểu 960px.

Xóa phần sau (dòng 1449 đến 1530):

/* Genesis Menu
--------------------------------------------- */

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

.genesis-nav-menu .menu-item:focus,
.genesis-nav-menu .menu-item:hover {
    position: relative;
}

.genesis-nav-menu > .menu-bold > a {
    font-weight: 700;
}

.genesis-nav-menu > .menu-highlight > a {
    background-color: #333;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    margin-left: 15px;
    padding-left: 20px;
    padding-right: 20px;
}

.genesis-nav-menu > .menu-highlight > a:hover,
.genesis-nav-menu > .menu-highlight > a:focus {
    background-color: #0073e5;
}

.genesis-responsive-menu .genesis-nav-menu .sub-menu,
.genesis-responsive-menu .genesis-nav-menu .sub-menu a {
    width: 180px;
}

.genesis-nav-menu .sub-menu {
    border-top: 1px solid #eee;
    opacity: 0;
    padding-left: 0;
    position: absolute;
    transition: opacity .4s ease-in-out;
}

.genesis-nav-menu .sub-menu a {
    border: 1px solid #eee;
    border-top: 0;
    padding-bottom: 15px;
    padding-top: 15px;
}

.genesis-nav-menu .sub-menu .sub-menu {
    margin: -46px 0 0 179px;
}

/* Responsive Menu
--------------------------------------------- */

.genesis-responsive-menu {
    display: block;
    padding-top: 15px;
}

.menu-toggle,
.sub-menu-toggle {
    display: none;
    visibility: hidden;
}

/* Header Menu
--------------------------------------------- */

.nav-primary {
    clear: none;
    float: right;
    width: auto;
}

.nav-primary .genesis-nav-menu a {
    padding-left: 15px;
    padding-right: 15px;
}