Question

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

I want my navbar to be like this throughout and not only when i scroll

Answer 1

这将解决您的问题

白色background-color正在从js添加。

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

或

您可以像这样更改您的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; }

Answer 2

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

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

Answer 3

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

#mainNav.navbar-shrink

只需应用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; 
}

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

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

你不需要它

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

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

3 个答案: