css - Umbraco - Fanoe 初学者工具包 - 如何在所有屏幕尺寸上显示 "hamburger"菜单而不是导航？

Question

根据标题 - 给定 Umbraco 7 的默认 Fanoe 初学者工具包，什么是最好/最简单的方法来制作导航的“汉堡包”菜单，在移动站点中查看时出现，出现在所有版本(即桌面)而不考虑屏幕尺寸？

(这个入门工具包已经带有最小屏幕尺寸 = 992 等的逻辑，但我似乎无法获得“切换”以忽略屏幕尺寸但从不显示文本导航，除非点击切换!)

初学者工具包附带的 CSS 包含类似于以下的属性:

@media (max-width: 992px) {

body {
    width: 100vw;
    overflow-x: hidden;
}

nav {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1;
    transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out;
    transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
    text-align: center;
    position: absolute;
    top: 144px;
}

编辑添加:我知道“汉堡包”的可用性问题；为简单起见，我之前没有提到它，但实际上我打算用“OPTIONS”之类的东西替换那个图标。

Answer 1

删除这个:

@media (min-width: 992px){
 #toggle {
    display: none; 
}}

加上这个:

`-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 1;
transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out;
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
text-align: center;
position: absolute;
top: 144px;`

没有@media 的导​​航部分: