如何识别 CSS 中的导航栏颜色
洛美格
目前，我的 WordPress 网站上的粘性导航在主页上是透明的，在其他页面上是白色背景。我已经尝试将此 CSS 中的部分复制到我的子主题 style.css 文件中并更改十六进制代码，但我无法识别需要更改颜色的代码部分。
透明： 
白色的： 
编辑 .container 后：在此处输入图像描述
@media (min-width: 768px) {
.nav > li > a:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: #00aff2;
-webkit-transition: all 1s;
transition: all 1s;
}
.nav > li:hover > a:before {
width: 100%;
left: 0;
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.shrink .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
font-size: 14px;
}
.navbar-nav li:hover .dropdown-menu{
visibility:visible;
border-top: 4px solid #ccc;
border-radius: 0;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#site-navigation .container{
padding-left: 0;
padding-right: 0;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
}
.navbar-center .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-center .menu-container {
text-align: center;
}
}
@media (min-width: 600px) {
.admin-bar #site-navigation.shrink {
top: 32px;
}
}
@media (max-width: 767px) {
.nav > li.active > a:after, .current-page-parent:after {
height: 0 !important;
background-color: transparent !important;
}
.navbar-nav a:hover, .navbar-nav a:focus {
color: #ffffff !important;
background-color: #000 !important;
}
.menu-container {
width: 70%;
position: absolute;
left: 0;
height: 100vh;
transform: translate3d(-100%, 0, 0);
overflow-y: auto;
overflow-x: auto;
background-color: #fff;
top: 100%;
}
.openNav .menu-container {
transform: translate3d(0, 0, 0);
transition: transform 500ms ease;
}
.openNav .page-area {
left: 0;
transform: translate3d(70%, 0, 0);
transition: transform 500ms ease;
}
.page-area {
left: 0;
transform: translate3d(0, 0, 0);
transition: transform 500ms ease;
}
.navbar-nav {
padding: 0;
margin: 0;
}
.navbar-nav a {
font-size: 14px;
padding: 15px 10px !important;
margin: 0 !important;
line-height: 16px !important;
background-color: white;
float: left !important;
margin: 0px !important;
width: 100%;
text-transform: none !important;
word-wrap: break-word;
white-space: normal !important;
}
.navbar-nav li, .navbar-nav ul {
padding: 0px !important;
margin: 0px !important;
}
.open-panel {
width: 32px;
height: 32px;
position: absolute;
top: 18px;
right: 22px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;<nav class="navbar navbar-default navbar-fixed-top navbar-color-on-scroll navbar-transparent hestia_left">
<div class="container">
<div class="navbar-header">
<div class="title-logo-wrapper">
<a class="navbar-brand" href="http://localhost/wordpress/" title="">
<img src="http://localhost/wordpress/wp-content/uploads/2018/09/cropped-hestia-header-2.jpg" alt=""></a>
</div>
</div>
<div id="main-navigation" class="collapse navbar-collapse"><ul id="menu-navigation" class="nav navbar-nav navbar-right"><li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16 active"><a title="Home" href="http://localhost/wordpress">Home</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a title="About Us" href="http://localhost/wordpress/about/">About Us</a></li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a title="Sponsorship" href="http://localhost/wordpress/sponsorship/">Sponsorship</a></li>
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a title="Blog" href="http://localhost/wordpress/blog/">Blog</a></li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a title="Contact" href="http://localhost/wordpress/contact/">Contact</a></li>
</ul></div><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="sr-only">Toggle Navigation</span>
</button>
</div>
</nav> 不变的变化
从所有页面或选定页面中删除标题导航栏或重新着色
根据您的评论：
要从主题中删除导航标题以放入您自己的导航标题，请将其放入您的子主题 css 中。
.navbar {display:none;}
在此实时视图中，我已将其添加到自定义 CSS，但也可在子主题 .css 文件中使用。
*这将从所有页面中删除该区域。如果您只想在主页上删除它，则只需使用以下代码将 CSS 添加到该页面：
.home .navbar {display:none;}
要从其他页面删除背景并box-shadow使用以下代码：
.navbar {
background:none;
-webkit-box-shadow:none;
box-shadow:none;
}
要更改页面上的导航背景颜色，请使用以下代码：
.navbar {
background:#000;
}
或者
.home .navbar {
background:#000;
}
另一种去除透明主页导航标题的方法是这样的：
.navbar.navbar-transparent {
display: none;
}
要将主页上的透明区域重新着色为红色，请使用以下命令：
.home .navbar.navbar-transparent{
background-colour: #FF0000;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 3
如何检查字符串输入的格式
- 4
如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是
- 5
Modbus Python施耐德PM5300
- 6
错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'
- 7
用日期数据透视表和日期顺序查询
- 8
检查嵌套列表中的长度是否相同
- 9
Java Eclipse中的错误13，如何解决？
- 10
ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）
- 11
如何监视应用程序而不是单个进程的CPU使用率？
- 12
如何自动选择正确的键盘布局？-仅具有一个键盘布局
- 13
ES5的代理替代
- 14
在令牌内联程序集错误之前预期为 ')'
- 15
有什么解决方案可以将android设备用作Cast Receiver？
- 16
套接字无法检测到断开连接
- 17
如何在JavaScript中获取数组的第n个元素？
- 18
如何将sklearn.naive_bayes与（多个）分类功能一起使用？
- 19
应用发明者仅从列表中选择一个随机项一次
- 20
在Windows 7中无法删除文件（2）
- 21
ggplot：对齐多个分面图-所有大小不同的分面
我来说两句