如何在移动设备上更改顶部导航栏的背景颜色

Question

希望在移动设备上将导航栏的背景颜色更改为黑色。然后想将“菜单”文本更改为白色，以便您可以看到文本。感谢您的帮助。我找不到正确的CSS选择器来定位此内容。

www.jobspark.ca

更新

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

- Chris S

Answer 1

这应该可以解决问题，但是需要注意屏幕宽度不要超过940像素。使用940像素可以确保在几乎所有移动设备上都能正常工作。

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

- SaidbakR

Answer 2

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

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

这是使用CSS的唯一方法，您无法针对特定设备（移动设备、平板电脑）进行定位，而是针对该设备的某些特定属性进行定位（在本例中为宽度或屏幕）。

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

- Galen

---

@media (max-width: 640px) { .top-nav { background: #000!important; color: #fff !important; 没有完全生效，但我认为我们正在正确的轨道上 } } - Chris S

@ChrisS 进行了编辑，但这只是一个例子，请根据您的具体需求进行调整。 - Galen

我不知道为什么它不起作用。我已经尝试了一段时间，但还是没有任何进展。我把代码放在上面了。 - Chris S

请提供更多反馈。您用什么浏览器或移动设备进行测试？您能在Firebug中看到应用于.top-nav的样式吗？ - Galen

Answer 3

这是我解决问题的方法：

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

- Chris S

Answer 4

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

在桌面浏览器（如 Chrome）中将浏览器缩小并右键单击菜单以检查元素。你可以看到应用于该宽度下菜单的所有样式，然后开始为菜单设置样式。

- ralph.m

---

谢谢关注。我已经能够解决样式问题，只需要想办法将标志插入到导航中。我正在尝试去掉“+”并用标志替换它。 - Chris S