WordPress - 将导航栏与 div 分开所需的 CSS 帮助答案

【问题标题】：WordPress - CSS help needed to seperate navbar from divWordPress - 将导航栏与 div 分开所需的 CSS 帮助
【发布时间】：2017-05-12 04:56:33
【问题描述】：

这是我目前的网站：jigsawcreations.net 如您所见，它在显示器上看起来很正常，但是每当您将屏幕大小调整为 iPhone 时，滑块的某些内容就会被导航栏隐藏。我目前在 .main 或导航栏的任何元素之间没有边距或填充，但它仍然会随着不同的分辨率而改变。我尝试在页面上多次检查 HTML 代码以查看可能导致此问题的原因，但我失败了。

提前致谢！

编辑：我看到导航栏和 .main 被赶上了，因为它们都是身体的一部分。它们都设置为块，但导航栏是固定的。会不会是这个原因？

【问题讨论】：

这和 wordpress 有什么关系？

标签： html css wordpress responsive-design

【解决方案1】：

您需要将导航栏上的显示从固定更改为相对。

.navbar-fixed-bottom, .navbar-fixed-top{
    position: relative;
    right: 0;
    left: 0;
    z-index: 1030;
}

【讨论】：

感谢您的回答，但是当我这样做时，它在导航栏和屏幕顶部之间留出了一个空间，并且 .main 仍然重叠。

【解决方案2】：

我看到有 JavaScript 可以自动向下移动 .main 容器，因此它从 .navbar 下方开始（检查时看起来像这样，调整大小时会发生变化：<div class="main" style="margin-top: 114px; min-height: 1px;">）。

但是，您在 WP 插件上有自定义 CSS，阻止 margin-top 生效（在 this file 中找到）：

div.main {
    margin-top: 0px!important;
}

删除自定义 CSS 覆盖以让 JS 完成它的工作，您的幻灯片将始终在导航栏下方开始，而不是在导航栏下方重叠。

【讨论】：

非常感谢您的回答！但是，需要自定义 CSS。我添加它是为了删除我的主题附带的一个烦人的标题，并删除一些在 .navbar 和 .main 之间留下空格的自动边距和填充。任何线索如何更改该 CSS 以删除边距，但阻止这两个元素重叠？

【解决方案3】：

把滑块 div 往下推怎么样？

div#n2-ss-2-align {
    margin-top: 74px;
}

如果您决定采用这条路线，则当您的标题更改高度时，您必须为不同的屏幕尺寸设置不同的边距值。

【讨论】：