How to lock a nav menu on a paralaxing theme

Question

I am trying to create a floating header nav menu and a floating footer nav menu, both customized. However, I can't figure out where to put it in the code, so that it doesn't scroll away.

The website is here http://steppetsgame.com. The grey bar at the bottom is suppose to stay at the bottom as I scroll down. As you can see it is stuck to something and I can't figure out how to stop this from happening.

I am using a parallaxing theme by themify on wordpress.

<div class="footer_custom">
    Footer Text/Code
</div>

.footer_custom {
    background-color: #d7d7d7;
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100px;
}

Answer 1

I do not know if I understand what you want to do with the header menu, but to position it at the top of your site you can use this:

#nav-bar {
   background-color: rgba(0, 0, 0, 0.7);
   position: fixed;
   z-index: 9998;
   top: 0px;
   left: 0px;
   width: 100%;
   padding: 0px;
   margin: 0px;
}

The "fixed" value combined with the top property will position your nav at the top of your site and it works when scrolling.

For your footer menu is very similar:

.footer_custom {
   background-color: #D7D7D7;
   position: fixed;
   z-index: 9999;
   bottom: 0px;
   left: 0px;
   width: 100%;
   padding: 0px;
   margin: 0px;
   height: 100px;
}

The "fixed" value combined with the bottom property will position your footer nav at the bottom of your site and it works when scrolling.

And both codes work with responsive design.