Divi主题中的Wordpress底部固定导航栏

Question

我正在尝试使用Divi主题将我网站的主导航定位在图像组件下方，使用position：fixed和bottom：0px但无效。我做错了什么，我该怎么做？我应该使用百分比来保持图像组件的高度吗？因为每次我尝试这样做，包含该div的类都会覆盖它。这就是我想要的样子：

Here是我正在使用的页面。

Answer 1

所需的更改次数。

首先，删除style="top:0px"元素的内联#main-header。

接下来，删除top:0并更改为

中的bottom:0

#main-header {
  line-height: 23px;
  font-weight: 500;
  /*top: 0;*/
  bottom: 0;
  background-color: #fff;
  width: 100%;
  padding: 18px 0 0 0;
  min-height: 43px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 99999;
}

最后，对于#page-container，将padding-top: 78px更改为padding-top: 0px

Answer 2

在你header.php中，删除top: 0

<强> HTML

<header class="et_nav_text_color_dark" id="main-header" style="top:0"></header>

到此：

<header class="et_nav_text_color_dark" id="main-header"></header>

<强> CSS

在CSS中从top: 0移除#main-header并添加以下属性

#main-header {
  bottom: 0;
}

.et_fixed_nav #page-container {
  padding-top: 0 !important;
}

<强>输出：