skip to Main Content

I’m trying to position the main navigation of my website below an image component using the Divi theme, using position: fixed and bottom: 0px but to no avail. What am I doing wrong and how would I go about this? Should I keep the height of the image component using percentages? because every time I try doing that, the class containing that div overrides it. This is the sort of look I’m going for:

Trying to make it look like this

Here is the page I’m working with.



  1. Number of changes needed.

    First, remove the inline style="top:0px" for the #main-header element.

    Next, remove top:0 and change to bottom:0 in

    #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;

    Finally, for #page-container, change padding-top: 78px to padding-top: 0px

    Login or Signup to reply.
  2. In you header.php, remove the top: 0


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

    to this:

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


    In your CSS remove top: 0 from #main-header and add the below property

    #main-header {
      bottom: 0;
    .et_fixed_nav #page-container {
      padding-top: 0 !important;

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top