css - 使媒体导航栏在 Wordpress 网站上发挥作用

Question

我有一个我正在使用的 wordpress 网站，它已经有几年的历史了(但是是最新的......尽可能多)，并使用“Expound”主题。

它应该是响应式的，但导航栏无法正常工作。当显示宽度小于 600px 时，导航栏菜单会折叠，这是应该的。问题是当您单击折叠的“菜单”时，菜单不会扩展。

我只想知道需要做什么才能在移动设备/小屏幕上实际显示该导航栏。

我很乐意提供代码片段，但我不确定问题出在哪里。

这是我的 reset.css 文件包含的内容(负责折叠操作的内容):

    /* Small menu */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.main-small-navigation ul {
    display: none;
}

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
}

Answer 1

我使用 vanilla javascript 制作了一个基本的汉堡包菜单:

Javascript:

var menu = document.getElementById("menu-fluke-catalog-1")
var toggler = document.querySelectorAll(".menu-toggle")[0];
toggler.addEventListener("click", function (event) {
    if (! menu.classList.value.includes("open")){
        // Menu will open
        menu.classList.add("open");
    } else {
        // Menu will close
        menu.classList.remove("open");
    }
});

CSS:

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
    .navigation-main ul.open {
        display: block;
    }
    /* don't use the next one if you want a more condensed menu*/
    .navigation-main ul.open li {
        display: block;
        width: 100%;
    }
}

检查功能是否适合您，如果您希望它更简洁，您可以删除 .navigation-main ul.open li 样式规则。