我的.navbar存在问题。在第一张图片中,我更改了文本和徽标的填充,这就是我想要的。
第一张图片
滚动悬停效果时会更改导航条的填充。
最后,真正的问题是,在向下滚动之后,.navbar填充仍然与第一张图像不同
第二张图片
我有以下css代码,我自己无法解决这个问题。我希望你们能给我一些建议。
.navbar-brand {
position: relative;
padding: 10px 0;
margin: 0!important;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav {
margin-right: 10px!important;
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav > li {
margin-left: 6px;
}
.navbar-default .navbar-nav > li:first-child {
margin-left: 0;
}
.navbar-default .navbar-nav > li > a {
color: #999;
display: block;
font-size: 14px;
font-weight: 300;
padding: 28px 15px 15px 15px;
overflow: hidden;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
font-weight: 400;
}
.navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {
border-bottom: 2px solid;
}
.navbar-default .navbar-nav > li > a i {
margin: 0 -2px 0 -5px;
}
.navbar-default .navbar-nav > li > a:after {
position: absolute;
bottom: 0;
content: '';
left: 50%;
display: block;
height: 5px;
width: 5px;
opacity: 0;
margin: 0 0 -3px -2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
.navbar-default .navbar-nav > li > a.active:after {
opacity: 1;
}
.navbar-default .navbar-nav .dropdown {
position: absolute;
left: 0;
top: 100%;
width: 180px;
background-color: #fff;
visibility: hidden;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav > li.drop:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown li, .sup-dropdown li {
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.dropdown li:first-child, .sup-dropdown li:first-child {
border-top: none;
}
.dropdown li a, .sup-dropdown li a {
display: block;
color: #666;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
padding: 11px 16px;
text-decoration: none;
text-transform: capitalize;
transition: padding 0.2s ease-in-out;
-moz-transition: padding 0.2s ease-in-out;
-webkit-transition: padding 0.2s ease-in-out;
-o-transition: padding 0.2s ease-in-out;
}
.dropdown > li:hover > a, .sup-dropdown li:hover > a {
padding-left: 18px;
}
.dropdown li a i {
margin: 0 0 0 -4px;
}
.navbar-default .navbar-nav .sup-dropdown {
position: absolute;
left: 100%;
top: 0;
width: 180px;
background-color: #fff;
margin-top: 10px;
transition: margin-top 0.2s ease-in-out;
-moz-transition: margin-top 0.2s ease-in-out;
-webkit-transition: margin-top 0.2s ease-in-out;
-o-transition: margin-top 0.2s ease-in-out;
visibility: hidden;
z-index: 3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown {
visibility: visible;
margin-top: 0;
}