如何在移动设备中更改顶部导航背景颜色答案

【问题标题】：How to change the Top Navigation Background color in mobile如何在移动设备中更改顶部导航背景颜色
【发布时间】：2013-05-04 11:28:46
【问题描述】：

希望在移动设备中查看时将导航的背景颜色更改为黑色。然后想将“菜单”文本更改为白色，以便您可以看到文本。谢谢您的帮助。我找不到合适的 CSS 选择器来定位它。

www.jobspark.ca

**** 已更新 **** *********

@media all and (max-width: 640px) {
.top-nav {
 background: #000 !important;
 color: #fff !important;
 } 
}

【问题讨论】：

标签： css mobile

【解决方案1】：

这应该可以解决问题，但您应该注意屏幕宽度不应超过 940 像素。 940px 以确保它适用于几乎任何移动设备。

@media only screen and (max-width: 940px) { 
     .top-nav {
         background: #000 !important;
         color: #fff !important;
        } 
}

【讨论】：

【解决方案2】：

我就是这样解决的：

@media (max-width: 640px) {
    .mobile-nav .show-nav {
        display: block;
        padding: 1em 40px;
        color: #fff;
        background: #000; 
        cursor: pointer;
        border-bottom: 1px solid #000;
    }
}

【讨论】：

【解决方案3】：

您的第一个问题是您的页面上没有类为.top-nav 的元素。你的意思可能是.nav。然而，除了背景颜色之外，还有更多的问题。您需要为小屏幕上的导航设置更多样式才能显示出来。

在您的桌面浏览器（如 Chrome）上，向下缩小浏览器并右键单击菜单以检查元素。您可以查看适用于该宽度菜单的所有样式，然后为菜单设置样式。

【讨论】：

感谢您的关注。我能够弄清楚样式只需要找出一种将徽标以某种方式插入导航的方法。我正在尝试摆脱 + 并用徽标切换它

【解决方案4】：

您可以通过 CSS 中的媒体查询来定位特定的视口宽度：

@media all and (max-width: 400px) {
  .top-nav {
     background-color: black;
     color: white;
  }
}

这是使用 css 的唯一方法，您不能针对特定设备（手机、平板电脑），而是针对该设备的某些特定属性（在本例中为宽度或屏幕）。

您可以搜索“媒体查询”或“响应式设计”以找到更深入的示例。

【讨论】：

@media (max-width: 640px) { .top-nav { 背景: #000!important;颜色：#fff！重要；似乎不太有效，但我认为我们走在正确的轨道上} }
@ChrisS 已编辑，但只是一个示例，适合您的特定需求
我不知道为什么它不起作用。我已经玩了一段时间了，仍然没有。我把代码放在上面
请提供更多反馈。您使用什么浏览器或移动设备进行测试？你能在 Firebug 中看到 .top-nav 应用了哪些样式吗？