更改导航栏的背景颜色 (Bootstrap/Genesis)
Change background colour of nav bar (Bootstrap/Genesis)
我在 Wordpress 上的 Genesis 框架上 运行 Bootstrap。我有一个顶级导航栏,我想将其从黑色更改为白色。这最初是 Bootstrap 但当我将网站放到 Wordpress 上时,我相信它可能已经更改为创世默认值。
我试过更改 class 背景颜色 .site-header
但它似乎不相关。
将 background-color
添加到 .wrap
似乎会更改导航栏的颜色但会忽略按钮,因此我认为这可能是在转移注意力。
有人可以看看 - URL 位于:https://www.moneynest.co.uk/blog/
试试这个代码,我已经成功地改变了我的导航栏背景颜色。
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
如果您正在使用 bootstrap,请检查您是否添加了 .navbar-inverse class。如果您只是将其替换为 .navbar-default。 .navbar-inverse 是基于黑色背景的导航栏,而 .navbar-default 是它的白色对应部分。
试试下面的代码看看
.site-header .wrap, header.site-header .genesis-nav-menu a {
background-color: #6a1010;
}
我在 Wordpress 上的 Genesis 框架上 运行 Bootstrap。我有一个顶级导航栏,我想将其从黑色更改为白色。这最初是 Bootstrap 但当我将网站放到 Wordpress 上时,我相信它可能已经更改为创世默认值。
我试过更改 class 背景颜色 .site-header
但它似乎不相关。
将 background-color
添加到 .wrap
似乎会更改导航栏的颜色但会忽略按钮,因此我认为这可能是在转移注意力。
有人可以看看 - URL 位于:https://www.moneynest.co.uk/blog/
试试这个代码,我已经成功地改变了我的导航栏背景颜色。
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
如果您正在使用 bootstrap,请检查您是否添加了 .navbar-inverse class。如果您只是将其替换为 .navbar-default。 .navbar-inverse 是基于黑色背景的导航栏,而 .navbar-default 是它的白色对应部分。
试试下面的代码看看
.site-header .wrap, header.site-header .genesis-nav-menu a {
background-color: #6a1010;
}