代码之家 › 专栏 › 技术社区 › Rajdeep

wordpress(header/nav bar)上相同图像的不同背景位置,以及如何使它们相同?

header wordpress css

1

Rajdeep · 技术社区 · 8 年前

我正在开发一个 website 在WordPress上遇到了一些问题。基本上,我的客户希望标题是这样的:

基本上,当鼠标悬停在选项卡上时,在特定选项卡下应该显示一条蓝线。我通过CSS插入了一个图像来完成这项工作,它工作得很好。但是,当我向下滚动时,主题自动将标题的大小(高度)更改为:

现在,这使得它变得丑陋,因为蓝线(我设置的图像)现在太靠近单词了。这是我为图像设置的CSS代码:

.navbar-nav > li > a:hover{
    text-decoration: none;
    background-image: url('https://cdn.pbrd.co/images/HtVu9bz.png');
    background-size: 65% 2px; 
    background-repeat: no-repeat; 
    background-position: 50% 62%;
    padding-bottom: 0px;
}

这里的目标是使标题导航菜单的向下滚动版本的蓝色下划线间距与未滚动版本完全相同。我试过延长向下滚动版本的容器,但没有效果,即使向下滚动版本的容器大小与主版本大致相同,蓝色下划线也不会移动,紧贴单词。综上所述,问题是同一图像的不同背景位置。我想让它们一样。我们非常感谢您的帮助。

我还尝试将其添加到header.php中:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<script type = "text/javascript">
$("sticky-nav").hover(function () {
    if ( $("sticky-nav").hasClass( "navigation sticky offset scrolling" ) ) {
            $("sticky-nav").css("padding-bottom","7px");
    }
    else {$("sticky-nav").css("padding-bottom", "0px");}
 });
</script>

我只是在尝试当类向下滚动时增加填充。但不知何故,它不起作用。

2 回复 | 直到 8 年前

1

0

Faham Shaikh 8 年前

更好的解决方案是使用border-bottom,它将根据锚定元素的填充来调整自身。

.menu-item.active, .navbar-nav > li > a:hover{
    border-bottom: 3px solid #406d96;
}

2

0

Rajdeep 8 年前

好的,解决了它,我意识到我只需要在滚动时访问.navigation.sticky类,而不只是导航条导航。所以我复制了之前编写的整个CSS函数,并更改了类和填充。总而言之,我现在在wp上的附加css下有了这2个:

.navbar-nav > li > a:hover{
text-decoration: none;
background-image: url('https://cdn.pbrd.co/images/HtVu9bz.png');
background-size: 65% 2px; 
background-repeat: no-repeat; 
background-position: 50% 62%;
padding-bottom: 0px;
}


.navigation.sticky .navbar-nav > li > a:hover{    //------>including the .sticky class
    text-decoration: none;
    background-image: url('https://cdn.pbrd.co/images/HtVu9bz.png');
    background-size: 65% 2px; 
    background-repeat: no-repeat; 
    background-position: 50% 62%;
    padding-bottom: 8px;    // -------> Change the padding 

}