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

【问题标题】：background Content of div occurs in navbardiv的背景内容出现在导航栏中
【发布时间】：2018-03-10 06:58:15
【问题描述】：

我正在使用创意引导主题，其中背景图像出现在导航栏中，并且仅在我滚动时才会更改。我不希望导航栏在滚动时改变，它应该是默认的，当我滚动时会出现白色背景。这是模板的链接 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

【问题讨论】：

标签： javascript html css scroll navbar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

#mainNav.navbar-shrink

只需将适用于您的#mainNav 的任何 navbar-shrink 应用到，

// 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，你的代码会变得混乱

【讨论】：

我已经这样做了，但现在导航栏是白色的，但文本也是白色的
嗨，@BharatRathore，你添加了这个吗？ #mainNav .navbar-brand { 颜色：#f05f40;确保删除添加收缩类的 JS，你可能还想从 CSS 中删除 .navbar-shrink 因为你不需要它
另外，您在导航右侧的导航项目需要是黑色的，对吧？ #mainNav .navbar-nav > li.nav-item > a.nav-link，#mainNav .navbar-nav > li.nav-item > a.nav-link:focus { 颜色：#212529; }

【解决方案3】：

这将解决您的问题

白色的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;
}

【讨论】：