Umbraco - Fanoe starter kit - 如何在所有屏幕尺寸上显示“汉堡”菜单而不是导航？答案

【问题标题】：Umbraco - Fanoe starter kit - How to make the "hamburger" menu appear instead of the nav on all screen sizes?Umbraco - Fanoe starter kit - 如何在所有屏幕尺寸上显示“汉堡”菜单而不是导航？
【发布时间】：2016-09-28 12:43:53
【问题描述】：

根据标题 - 给定 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”之类的东西替换那个图标。

【问题讨论】：

谷歌汉堡菜单的可用性。很多人甚至不知道这三行是什么意思。所以也许你应该重新考虑一下？
也就是说，如果我没记错的话 Fanoe 是基于 Twitter Bootstrap 的。您可以尝试在 Bootstrap 上下文中寻找帮助？
也许stackoverflow.com/q/23641125/3668031 ?

标签： css content-management-system themes umbraco

【解决方案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 的导航部分：

【讨论】：