1) 看起来，只要导航栏只有一行高，它的高度就会恒定为 50px。如果是这种情况，那么解决第一个问题就像添加
position:relative;
top:-50px;
to .navbar-engage。如果情况并非如此（即使导航栏只有一行高，例如如果字体大小发生变化，导航栏也可以更改高度），那么将需要一些 JavaScript 来完成这项工作。
2）要在导航栏全是一行时更改文本颜色，我们需要媒体查询。当导航栏是单行时，以下将使文本变为白色：
@media (min-width: 768px) {
.navbar-engage a {
color:white;
}
.navbar-engage li a:hover {
color:black;
}
}
第二个选择器，.navbar-engage li a:hover添加 ，以使文本在悬停时变为黑色。这不是您最初请求的一部分，但它极大地增加了内容的可读性。接受还是放弃——由你决定。
3）我们需要做的就是添加另一个媒体查询，它将撤消我们的定位更改并修改导航栏的背景颜色：
@media (max-width: 767px) {
.navbar-engage {
top:0px;
background:#808184;
}
}
最终的 CSS 看起来像这样：
.navbar-engage {
background-color: rgba(0, 0, 0, 0.5);
filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
-ms-filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
border-color: #e7e7e7;
color: #FFFFFF;
position: relative;
top: -50px;
}
@media (min-width: 768px) {
.navbar-engage a {
color: white;
}
.navbar-engage li a:hover {
color: black;
}
}
@media (max-width: 767px) {
.navbar-engage {
top: 0px;
background: #808184;
}
}
但请记住，为了单独使用 CSS 来完成此操作，必须对某些数字进行硬编码，这意味着对标记的更改可能会导致需要稍微调整 css 才能使事情正常工作。
我也有可用的工作小提琴here https://jsfiddle.net/PullJosh/o224pwpa/.
