css - 媒体查询问题在两个导航菜单之间切换

Question

我有一个菜单，其中包含两个由媒体查询触发的独立菜单。

codepen 是:http://codepen.io/iamgonge/pen/QpOgZB (感谢设计建议)

CSS:

 @media only screen and (max-width: 768px;) { #big{display:none;}}
     @media only screen and (min-width: 769px;) { #little {display: none;}}

在 767px 处，移动汉堡菜单可见，在 768px 处，它是移动导航但不可折叠，在 769px 处，它是桌面导航。我希望移动导航显示可折叠菜单，包括 768(Ipad 纵向)是什么让 768 像素的菜单以它的方式显示？

Answer 1

您必须为 768px 的宽度自定义 css:

带有 .in 类的 Navabar 显示在表格中 nav ul li{display:block;向左飘浮;宽度:100%；} .collapse.in{overflow-y:visible;}

简而言之，如果您想在 768px 上将移动导航显示为切换菜单，则必须自定义 css。