我该如何修复我的导航，因此在小屏幕上调整大小时会显示汉堡菜单

Question

最终目的是使我的导航看起来像这样：

  <div class="l-region l-region--navigation">
    <div data-mediasize="959" class="responsive-menus responsive-menus-0-0 absolute"><span class="toggler">☰ Menu</span><div id="block-superfish-1" class="block block--superfish block--superfish-1 responsive-menus-simple">
        <div class="block__content">
    <ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-none sf-total-items-8 sf-parent-items-6 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow"><li id="menu-2237-1" class="first odd sf-item-1 sf-depth-1 sf-no-children"><a href="/event" class="sf-depth-1">Events</a></li>

链接到代码：https://jsfiddle.net/4b17u2fs/1/

Answer 1

为此您必须使用其他@media querries。

使用这些media querries，您将可以使您的汉堡按钮可见或不可见。然后，当您单击按钮时，就可以使用该事件的JavaScript。

您可以执行以下操作：

@media screen and (max-width: 1100px) {
    .burger-button {
        display: inline-block;
    }
}

.burger-button {
   display: none;
}

这只会使您的.burger-button在小于1100像素的屏幕上可见。

您只需要进行调整即可，但这就是方法。