背景 div 的内容出现在导航栏中

Question

>我正在使用创意引导主题，其中背景图像出现在导航栏中，并且仅在我滚动时才会更改。我不希望导航栏在滚动时发生变化，它应该是默认的白色背景，这在我滚动时会出现。这是模板的链接https://startbootstrap.com/template-overviews/creative/This 是默认的

我希望我的导航栏始终是这样的，而不仅仅是当我滚动时

Answer 1

您需要通过添加以下代码使其位置固定而不是相对：

.navbar {
    position: fixed;
    z-index: 100;
    width: 100%;
}

Answer 2

当您向下滚动时，此类将应用白色和橙色：

#mainNav.navbar-shrink

只需应用适用于 #mainNav 的任何导航栏收缩，

// white background
#mainNav {
    border-bottom: 1px solid rgba(33,37,41,.1);
    background-color: #fff;
}
// orange branding title
#mainNav .navbar-brand {
    color: #f05f40;
}
// black navigation links
#mainNav .navbar-nav > li.nav-item > a.nav-link {
  color: #212529; 
}

这应该足够了，但是如果你想进一步清理，删除实际添加导航栏收缩部分的Javascript部分，该函数应包含以下内容：

$("#mainNav").addClass("navbar-shrink");

你不需要它

尽量不要在你的css选择器中使用！important，你的代码会变得混乱

Answer 3

这将解决您的问题

白色background-color是从js添加的。

只需一步，您就可以通过将此类添加到此处<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> 来获取此标头navbar-shrink。

或

你可以像这样改变你的css。

background-color and border-color

#mainNav {
    border-color: transparent; /* need to change */
    background-color: transparent; /* need to change */
}
#mainNav {
    border-color: 1px solid #22262a;
    background-color: #fff;
}

Logo Color(nav-brand)

#mainNav .navbar-brand {
    color: rgba(255,255,255,.7); /* need to change */
}
#mainNav .navbar-brand {
    color: #f05f40;
}

Link Color(a)

#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
    color: rgba(255,255,255,.7); /* need to change */
}
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
    color: #212529;
}