使媒体导航栏在Wordpress网站上起作用

Question

我有一个我正在工作的wordpress网站，它已经有几年的历史了(但尽可能多地使用date...as )，并且使用了"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样式规则。