Question posted in
The full documentation can be found here.

WordPress Bottom-Fixed Navigation Bar in Divi Theme

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.

Tags:

2

Answers


  1. 0

    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. 0

    In you header.php, remove the top: 0

    HTML

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

    CSS

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

    Output:
    enter image description here

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

Back To Top
Search