导航栏菜单未显示在移动视图中

Question

我有一个响应式网站，它在桌面上运行良好，但在移动设备和平板电脑视图中运行不佳。导航栏中的菜单未显示在移动设备和平板电脑视图中

您可以在此处查看 link 的屏幕截图：https://dl.dropboxusercontent.com/s/866bi2l7oho5w6y/prob1.JPG

这是我的网站：http://www.sociolife.co.in/

PS：导航栏显示在平板电脑和移动设备视图中，但未显示菜单。

你能告诉我问题出在哪里吗？我该如何解决？

Answer 1

你有一个 media-query，它将 #menu-main 设置为 display: none windows 小于 1024px

从您的 css 中删除这一行，一切正常：

@media only screen and (max-width: 1028px)
#menu-main {
  display: none;
}

//EDIT 不，你没有删除它，否则它看起来像这样： http://imgur.com/XX2SlfG

//编辑 2 好的，现在我明白了。他们实现了第二个导航，这是一个选择框。这就是为什么他们在手机中隐藏 #menu-main 而显示 #tinynav1。也许您应该将此 link 添加到您的问题中，否则没人知道您想要实现什么。

选择框如下所示：

<select id="tinynav1" class="tinynav tinynav1">
    <option>Navigation</option>
    <option>your options</option>
    ....
</select>

但我想这是他们页面上的一个 JS 插件，我不知道你是否有这个插件。否则请google吧：

 $("#menu-main").tinyNav({
    active: 'selected', // String: Set the "active" class
    header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
    label: '' 
});

http://tinynav.viljamis.com/ <-- js库

导航栏菜单未显示在移动视图中

Navbar menus not showing in mobile view

html

css

responsive-design