如何在WordPress主题中设置一个固定的标题?

oalqel3c  于 2022-10-02  发布在  WordPress
关注(0)|答案(2)|浏览(200)

在开始创建自己的WordPress博客后,我被困在固定标题的位置上。

我只接触过少量的CSS/JavaScript,所以我在学习的过程中一直在即兴发挥!我想要达到的大部分已经完成了,但我只是想试着在我添加帖子等之前修复这个标题。

在互联网上搜索后,我只能真正找到以下内容,并将其添加到我的style.css文件中;


# masthead {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;}

这现在修复了标题图像和导航,但稍微偏离了中心,但我的页面的其余部分现在仍然落后于此。一个问题是,图像和导航的实际背景是不透明的。请看下面的截图

Before code - http://tinypic.com/r/2vxm69t/6
After code - http://tinypic.com/r/34jd2t1/6

我认为我可能需要在我的header.php中创建一个单独的‘div’,或者以某种方式修改它,但我不能100%确定是什么让它工作,因为我以前从未这样做过。理想情况下,我在导航链接下面添加的行,在添加此代码之前显示在屏幕截图上,这将指示标题的底部,当您滚动时,其余部分将在此下方消失。背景作为一个整体将保持白色,并位于页面其余部分的中心,仍然包括顶部的间隙,这将使背景变得非常有趣。

!!我必须为截图道歉,这不是很清楚,但我希望这能说明正在发生的事情,而且足够清楚,我会尽快主持这场比赛!

我的‘style.css’和‘header.php’的链接如下--如果你还需要什么,请告诉我;

style.css - http://codepad.org/c4BnqxlF
header.php - http://codepad.org/w4z19VLW

我希望有人能帮忙,因为我认为这将很好地在我的博客上,然后我可以得到张贴!

编辑

修改了代码,现在显示正确的对齐和背景,但仍然在标题图像上方显示白色部分-最好在以下屏幕截图http://tinypic.com/view.php?pic=126bd7c&s=6上显示


# masthead {background: #FFF;position:fixed; top:0px; height: 350px; z-index:100000; width:960px;}

# main {margin-top:335px;}

hwamh0ep

hwamh0ep1#

您将不得不调整您的代码以适合,但这里有一个例子,您可以执行我认为您正在努力实现的目标。

在您的代码中,您需要定义图像+NAV的背景颜色和高度。在此之后,您可能希望为id=“main”创建一个边距,使其位于剩余信息的下方,即图像+导航链接的边距顶部。

**更新:**将页边距-top添加到24px


# masthead {background: #FFF;position: fixed; top: 0px; height: 350px; z-index: 100000; width: 100%;margin-top: 24px;}

# main {margin-top:350px;}

参考文献:http://jsfiddle.net/6VcZe/1/

uttx8gqw

uttx8gqw2#

要正确对齐页眉,您需要定义页眉div的宽度:


# masthead { width: 900px }

这将允许自动边距技术正常工作,即使没有位置属性也是如此。

相关问题