如何修复Ghost casper主题中发布标题的位置？

Question

casper主题很棒。但是我想做一些调整。

HTML布局和css技巧不是我做的事情。所以我们走了......

我想修复网站标题的位置，以便滚动文章整齐地滑过顶部。

简单地改变位置的css：固定在site-header类几乎可以工作，因为它保持不变。但这样做会以相当丑陋的方式改变布局。即它向左移动网站标题，主页面上的所有帖子都在标题的顶部向上移动，因此当您第一次加载页面时，您无法看到它。对于那些在非常基本的css之外并不是非常精明的人来说，这是出乎意料的。

Answer 1

我自己就是这么说的。需要两个小的调整。在site-header上，设置z-index（我选择了1000）并设置width: 100%。然后，向padding-top添加适量的site-main。添加此填充的最佳方法是JS（动态检查site-header的外部高度），但如果您有理由确定标题不会移动大小，请继续并对其进行硬编码。

Answer 2

对于 casper 的 v4，将它添加到 .gh-head 类。您可以修改主题文件或进行代码注入。 95% 以上的用户支持 sticky 属性。检查 here 以获得完整列表。高位 z-index 负责确保滚动时内容不会越过您的标题。

.gh-head {
    position: -webkit-sticky; /* Older Safari browsers */
    position: sticky; /* Most other modern browsers including Safari */
    top: 0;
    z-index: 4000;
}