first of all, i'm using [this responsive template](https://themewagon.com/themes/white-pro-free-creative-multipurpose-html5-template/) for creating a website.
When you scroll down to the footer, the navbar on top is above the content, so you can see the navbar all the time. But when you reach the footer, the footer just overlaps the navbar. It seems, that the z-index attribute doesn't take effect. This bug is only in Safari. You can reproduce it, when your resolution is something like a mobile resolution (portrait).

[ONLY in SAFARI], this error doesnt appear in Chrome or Firefox

I really don't know what to do, i already tried a few things, which didnt solve the problem.

Please help :) Thx

Edit:

The Navbar is implemented as followed in index.html

```
<!-- PAGE -->
<div id="page">

    <!-- HEADER -->
    <header>

        <!-- MENU BLOCK -->
        <div class="menu_block">

            <!-- CONTAINER -->
            <div class="container clearfix">

                <!-- LOGO -->
                <div class="logo pull-left">
                    <a href="index.html" ><span class="b1">w</span><span class="b2">h</span><span class="b3">i</span><span class="b4">t</span><span class="b5">e</span></a>
                </div><!-- //LOGO -->

                <!-- SEARCH FORM -->
                <div id="search-form" class="pull-right">
                    <form method="get" action="#">
                        <input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
                    </form>
                </div><!-- SEARCH FORM -->

                <!-- MENU -->
                <div class="pull-right">
                    <nav class="navmenu center">
                        <ul>
                            <li class="first active scroll_btn"><a href="#home" >Home</a></li>
                            <li class="scroll_btn"><a href="#about" >About Us</a></li>
                            <li class="scroll_btn"><a href="#projects" >Projects</a></li>
                            <li class="scroll_btn"><a href="#team" >Team</a></li>
                            <li class="scroll_btn"><a href="#news" >News</a></li>
                            <li class="scroll_btn last"><a href="#contacts" >Contacts</a></li>
                            <li class="sub-menu">
                                <a href="javascript:void(0);" >Pages</a>
                                <ul>
                                    <li><a href="blog.html" >Blog</a></li>
                                    <li><a href="blog-post.html" >Blog Post</a></li>
                                    <li><a href="portfolio-post.html" >Portfolio Single Work</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div><!-- //MENU -->
            </div><!-- //MENU BLOCK -->
        </div><!-- //CONTAINER -->
    </header><!-- //HEADER -->

```

The Footer is implemented in index.html

```
    <!-- FOOTER -->
<footer>

    <!-- CONTAINER -->
    <div class="container">

        <!-- ROW -->
        <div class="row" data-appear-top-offset="-200" data-animated="fadeInUp">

            <div class="col-lg-4 col-md-4 col-sm-6 padbot30">
                <h4><b>Featured</b> posts</h4>
                <div class="recent_posts_small clearfix">
                    <div class="post_item_img_small">
                        <img src="images/blog/1.jpg" alt="" />
                    </div>
                    <div class="post_item_content_small">
                        <a class="title" href="blog.html" >As we have developed a unique layout template</a>
                        <ul class="post_item_inf_small">
                            <li>10 January 2014</li>
                        </ul>
                    </div>
                </div>
                <div class="recent_posts_small clearfix">
                    <div class="post_item_img_small">
                        <img src="images/blog/2.jpg" alt="" />
                    </div>
                    <div class="post_item_content_small">
                        <a class="title" href="blog.html" >How much is to develop a design for the game?</a>
                        <ul class="post_item_inf_small">
                            <li>14 January 2014</li>
                        </ul>
                    </div>
                </div>
                <div class="recent_posts_small clearfix">
                    <div class="post_item_img_small">
                        <img src="images/blog/3.jpg" alt="" />
                    </div>
                    <div class="post_item_content_small">
                        <a class="title" href="blog.html" >How to pump designer</a>
                        <ul class="post_item_inf_small">
                            <li>21 December 2013</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-6 padbot30 foot_about_block">
                <h4><b>About</b> us</h4>
                <p>We value people over profits, quality over quantity, and keeping it real. As such, we deliver an unmatched working relationship with our clients.</p>
                <p>Our team is intentionally small, eclectic, and skilled; with our in-house expertise, we provide sharp and</p>
                <ul class="social">
                    <li><a href="javascript:void(0);" ><i class="fa fa-twitter"></i></a></li>
                    <li><a href="javascript:void(0);" ><i class="fa fa-facebook"></i></a></li>
                    <li><a href="javascript:void(0);" ><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="javascript:void(0);" ><i class="fa fa-pinterest-square"></i></a></li>
                    <li><a href="javascript:void(0);" ><i class="map_show fa fa-map-marker"></i></a></li>
                </ul>
            </div>

            <div class="respond_clear"></div>

            <div class="col-lg-4 col-md-4 padbot30">
                <h4><b>Contacts</b> Us</h4>

                <!-- CONTACT FORM -->
                <div class="span9 contact_form">
                    <div id="note"></div>
                    <div id="fields">
                        <form id="contact-form-face" class="clearfix" action="#">
                            <input type="text" name="name" value="Name" onFocus="if (this.value == 'Name') this.value = '';" onBlur="if (this.value == '') this.value = 'Name';" />
                            <textarea name="message" onFocus="if (this.value == 'Message') this.value = '';" onBlur="if (this.value == '') this.value = 'Message';">Message</textarea>
                            <input class="contact_btn" type="submit" value="Send message" />
                        </form>
                    </div>
                </div><!-- //CONTACT FORM -->
            </div>
        </div><!-- //ROW -->
    </div><!-- //CONTAINER -->
</footer><!-- //FOOTER -->

```

The style.css implements following styles to the elements:

Footer: 

```
footer {
  overflow:hidden;
  position:fixed;
  bottom:0;
  left:50%;
  opacity:0;
  width:100%;
  padding:60px 0 10px;
  color:#999;
  background-color: #1c1c1c;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index:1;
}

```

Menu\_block:

```
.menu_block {
  position: fixed;
  z-index:9999;
  left:0;
  top:0;
  right:0;
  height:80px;
  width:100%;
  background-color:#fff;
  box-shadow:0 2px 3px rgba(0,0,0,0.1);
}

```