导航菜单被Image Slider覆盖

Question

我正在使用 htmlblank5 WordPress主题，我添加了一个滑块（Slippry.js），但它与我的导航菜单重叠了。

html

<!-- header -->
<header class="header clear" role="banner">
    <div class="navcanvas">
        <div class="wrapper">
                <!-- logo -->
                <div class="logo">
                    <a href="<?php echo home_url(); ?>">
                        <?php the_custom_logo();?>
                    </a>
                </div>
                <!-- /logo -->

                <!-- nav -->
                <nav class="nav" role="navigation">
                    <?php html5blank_nav(); ?>
                </nav>
                <!-- /nav -->
        </div><!-- /.wrapper -->
    </div><!-- /.navcanvas -->

</header>   <!-- /header -->

<div class="slider-section">
    <ul id="slider">
        <li>
            <a href="#slide1"><img src="<?php echo get_template_directory_uri() ?>/img/image-1.jpg"></a>
        </li>
        <li>
            <a href="#slide2"><img src="<?php echo get_template_directory_uri() ?>/img/image-2.jpg"></a>
        </li>
        <li>
            <a href="#slide3"><img src="<?php echo get_template_directory_uri() ?>/img/image-3.jpg"></a>
        </li>
    </ul>
<div>

CSS

/* wrapper */
.wrapper {
    max-width:1280px;
    width:95%;
    margin:0 auto;
    position:relative;
}
/* header */
.header {

}
.header .navcanvas{
    background-color: rgba(0,0,0, .7);
}

div.featuredImage{
    width: 100%;
    height: 300px;
    background-size: cover;
}

/* nav */
.nav {

}
.nav ul {
    list-style: none;
    padding:0;
    margin:0;

}
.nav ul li {
    padding: 12px 0;
    text-align: center;
}
.nav ul li.current_page_item {
    background-color:#1ca4ff;
}
.nav ul li a {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;

}
/* sidebar */
.sidebar {

}
/* footer */
.footer {

}



/*------------------------------------*\
    Slider
\*------------------------------------*/
.slider-section{
    width: 100%;


}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

  @media only screen and (min-width:768px) {
    .logo {
            width: 40%;
            float: left;
            text-align: left;
            margin-bottom: 0;
        }
        .logo-img {
            max-height: 73px;
        }

     .nav {
         height: 73px;
         width: 60%;
         float: right;
     }
     .nav ul {
         height: 73px;
         float: right;
     }
     .nav ul li {
         float: left;
         padding: 0 15px;
         height: 100%;
         line-height: 73px;
     }

     .header .navcanvas{
         position:absolute;
         left: 0;
         top: 18px;
         width: 100%;
}