当我修复菜单时，它会切入我的标题图像中

Question

我正在尝试将菜单修复到我的网站顶部（我已经能够弄清楚了），但是当我这样做时，它开始重叠到我的标题图像中，看起来不太好。我一直在尝试不同的修复程序，但似乎无法破解。

这里是我添加的CSS，将其切入标题。我已经能够向上移动菜单，使其不与图片重叠，但是随后看起来真的很奇怪，因为文本基本上位于屏幕的顶部，因此我取消了该操作。

@media only screen and (min-width: 768px) {
    .site-top {
        position: fixed;
        width: 100%;
        z-index: 1;
        top: 0;
    }
}

这里有一些图片，所以您可以看到我所看到的。这是通常的样子：without the added css

这是新代码的外观：with the added css

感谢您可以提供的任何帮助。

编辑添加：这是一个Wordpress.com网站，我只能在其中添加自定义CSS，并且无法访问整个代码，因此我不知道如何显示标题和菜单的代码。我的网站是mathbythemountain.com

Answer 1

在修复它之前，它已占用DOM中的空间。添加position: fixed后，它就变得绝对定位，并且在文档正常流程中的所有其他元素上都不存在。您需要为主体或顶部元素添加任何顶部边距或填充，以使其再次看起来相同。

Answer 2

您是否尝试过将宽度更改为“自动”...。会对结果感到好奇。...