如何更改手机中的顶部导航背景颜色

问题描述：

想要在移动中查看时将导航的背景颜色更改为黑色。然后希望将“菜单”文本更改为白色，以便您可以看到文本。谢谢您的帮助。我无法找到正确的CSS选择器来实现这一目标。如何更改手机中的顶部导航背景颜色

www.jobspark.ca

** * *修订* ** * ** * ** * ***

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

答

这是我如何解决它：

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

答

你可以定位在你的CSS通过媒体查询具体视口宽度：

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

这是使用CSS的唯一办法，你不能针对特定设备（手机，平板电脑），而是针对该设备的某些特定属性（在这种情况下，宽度或屏幕）。

您可以使用'媒体查询'或'响应式设计'来搜索更深入的示例。

@media（最大宽度：640像素）{ .TOP-NAV { 背景：＃000重要; color：#fff！important;没有似乎工作，但我认为我们走在正确的轨道 } } – 2013-05-09 21:31:54

@ChrisS编辑，但只是一个例子，适合您的具体需求 – Galen 2013-05-09 21:38:34

我不知道为什么它不工作。我曾经玩过一段时间，但一无所获。我把代码放在 – 2013-05-09 22:36:15

答

您的第一个问题是，您的网页上没有任何元素，其类别为.top-nav。你可能意思是.nav。然而，还有更多的问题不仅仅是背景颜色。您需要为小型屏幕上的导航设置更多的样式才能显示。

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

感谢您的关注。我能够弄清楚样式，只需要找出将标识插入导航的方式。我试图摆脱+和切换标志 – 2013-05-10 00:54:36

答

这应该解决的问题，但你应该注意到的是，屏幕的宽度应不超过940px。 940px确保它可以与几乎任何移动设备配合使用。

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

如何更改手机中的顶部导航背景颜色

相关推荐