Question

我有一个简单的css响应式菜单。

点击汉堡包时，它不会打开响应式菜单。

这是我的代码：

<div class="nav-wrapper">
    <div class="nav-inner">

        <label for="show-menu" class="show-menu"><div>Show Menu</div></label>
            <input type="checkbox" id="show-menu" role="button">


                <div class="menu-primary-container">

                    <ul id="menu" class="menu">

                        <li><a target="_blank" href="#">Newsletter</a></li>
                        <li><a href="#">Get involved</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Parents</a></li>
                        <li><a href="#">Workforce</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Get involved</a></li>
                        <li><a href="#">Languages</a></li>

                    </ul>

                </div>


    </div>

</div>

这是我的复选框汉堡包的css：

/*  ==============================
    RESPONSIVE NAV BUTTON
============================== */

.show-menu {
    text-decoration: none;
    text-align: center;
    display: none;
    background-color:$dark;

    font-family: $title-regular;
    font-size:15px;
    line-height:60px;
    color:$white;
    letter-spacing:1px;

    @media #{$tablet} {
        display:block;
    }
}

.show-menu div {
    display:inline-block;
    padding-left:25px;
    background-image: url("../includes/icons/hamburger.svg");
    background-repeat:no-repeat;
    background-position:center left;
}

.nav-wrapper input[type=checkbox] {
    display: none;
}


.nav-wrapper input[type=checkbox]:checked ~ #menu{
    display: block;
}

您可以在此处看到它：http://pagedev.co.uk/betterstart/

但是，由于我将菜单设置为Wordpress菜单，因此无效。

我似乎无法弄清楚为什么不打开菜单？

任何帮助都会很棒

Answer 1

这是一个wordpress问题。

Wordpress将其菜单包装在“menu-primary-container”

中

我添加了

'container' => ''

到我的数组，它解决了它。

响应式菜单 - 单击时不显示

1 个答案: