I am creating new site and i have designed template for it… for that i designed a fixed header menu bar. but the problem is below the menu bar i have added the code for slider. so because of using"position:fixed" partial part of slider is behind the menu
@charset "utf-8";
/* CSS Document */
.container{ width:100%; margin:0px; padding:0px;}
.clear{ clear:both;}
.top-header { background: #ececec; width: 100%; top:0; border-bottom:1px solid #d2cece;}
.top-left ul li { color:#333; list-style-type:none; font-family:Verdana, Geneva, sans-serif; font-size:11px;padding: 0px 2% 0px 2%; display:inline; border-right:1.5px solid #000;};
.top-header ul li img {width:1%;}
.top-left ul{ padding-top:8px; margin-bottom: 10px; };
.top-right{ };
.container{ }
/*header starts*/
.header{ width:100%; padding:0px; margin:0px; float:left; background:#ffffff;position:fixed; overflow:hidden; z-index:200;}
.header-bg{ }
.header-content{float:left; width:85%; margin-top: 10px;}
.header-booking{width: 100%;text-align: center;}
.header-booking p{ color: #656464;}
.logo{float:left; margin-top: 5px; width:14%;}
.navigation{padding: 0; list-style: none; background: #f2f2f2; float:right; background: rgba(242, 242, 242, 0.38); border: 1px solid #dad2d2;}
.navigation li{display: inline-block;position: relative;line-height: 21px;text-align: left;}
.navigation li a{display: block; font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:13px; padding: 8px 23px;color: #333;text-decoration: none; text-transform:uppercase;}
.navigation li a:hover{color: #fff;background: #00b0cb;}
.navigation li:hover .navigation{ }
.navigation li{ }
.navigation li ul.dropdown{width: 200%; /* Set width of the dropdown */background: rgba(242, 242, 242, 0.60);display: none;position: absolute;z-index: 999;left: 0; padding: 0px; margin: 0px;}
.dropdowntours{ width: 265% !important;}
.navigation li:hover ul.dropdown{display: block; /* Display the dropdown */}
.navigation li ul.dropdown li{display: block; border-bottom: solid 1px #a29a9a;}
/*headerends*/
/*slider starts*/
.carousel-inner > .item > img, .carousel-inner > .item > a > img {width: 100%; margin: auto;}
.carousel-inner {width:100%; height:600px;}
/*slider ends*/
/*about content*/
.about-sealavie{width:99%; }
.about-image{width:60%; float:left;}
.about-image img{width: 100%; padding-top: 20px;}
.about-text{width:40%; float:left;text-align:justify; }
.about-text p { text-align:justify; }
.above-text h3{ }
/*about content end*/
/*Eco tours*/
.eco-tours h3 { text-align:center;}
.tours img{ width:100%;}
.tours{width:25%; float:left; margin:2%; }
.tourblue{ background-color:#138EB3 !important;}
.tour-title p{font-family:playfair; color: #FFF; font-style:italic; font-size: 26px; bold; text-transform: capitalize;text-align: center; }
.tour-title{ line-height: 45px;background: #800001; width:100%;}
.tour-type{padding-left: 10%;}
/*Eco Tours */
<div class="header"><!--Header start-->
<div class="top-header">
<span class="top-left">
<ul>
<li><img src="images/social-media/email.png" style="width:1%" />info@sealavieresort</li>
<li><img src="images/social-media/phone.png" style="width:1%" /> +91 93601 16011</li>
<li style="padding-right: 23%;"><img src="images/social-media/sitemap.png" style="width:1%"/> SITEMAP</li>
<li>HOME</li>
<li>SEA LA VIE</li>
<li>RECIPES</li>
<li>BLOG</li>
<li>FAQ</li>
</ul>
</span>
<div class="clear"></div>
</div>
<div class="logo"><!--logo start-->
<img src="images/logo.png" alt="sealavieresort" />
</div> <!--logo end-->
<div class="header-content">
<div class="header-booking">
<p><b>For Booking:</b> +91 ##### ##### / +91 ***** ***** </p>
</div>
<div class="nav-menu"><!--Nav menu start-->
<ul class="navigation">
<li><a href="sealavie.php">Sea La Vie</a>
<ul class="dropdown">
<li><a href="sealavie.php#sealavie">About</a></li>
<li><a href="sealavie.php#beach-villas">Beach Villas</a></li>
<li><a href="sealavie.php#studio-apartments">Studio Beach Apartments</a></li>
</ul>
</li>
<li><a href="offerings.php">Offerings</a>
<ul class="dropdown">
<li><a href="offerings.php#weekend-outing">Weekend Outing</a></li>
<li><a href="offerings.php#family-outing">Family Outing</a></li>
<li><a href="offerings.php#">Friends Day Outing</a></li>
<li><a href="offerings.php#">Family Reunions</a></li>
<li><a href="offerings.php#corporate-day-outing">Corporate Day Outing</a></li>
<li><a href="offerings.php#serviced-homes">Serviced Homes</a></li>
</ul>
</li>
<li><a href="tours.php">Tours</a>
<ul class="dropdown dropdowntours">
<li><a href="tours.php#nearby-attraction-tour">Nearby Attractions Tour</a></li>
<li><a href="tours.php#fishing-village-tour">Fishing Village Tour</a></li>
<li><a href="tours.php#bird-watching">Bird Watching Tour</a></li>
<li><a href="tours.php#social-service-tour">Social Service Tour</a></li>
</ul>
</li>
<li><a href="covelong-bar.php">Covelong Bar</a></li>
<li>
<a href="activities.php">Activities</a>
<ul class="dropdown">
<li><a href="activities.php#swimming-pool">Swimming Pool</a></li>
<li><a href="activities.php#massage-chairs">Massage Chairs</a></li>
<li><a href="activities.php#surfing">Surfing</a></li>
<li><a href="activities.php#sea-kayaks">Sea Kayaks</a></li>
<li><a href="activities.php#deep-sea-fishing">Deep Sea Fishing</a></li>
<li><a href="activities.php#beach-running-cycling">Beach Running & Cycling</a></li>
<li><a href="activities.php#beach-volleyball">Beach Volleyball</a></li>
<li><a href="activities.php#camp-fire">Camp Fire</a></li>
<li><a href="activities.php#beach-angling">Beach Angling</a></li>
<li><a href="activities.php#atv-ride">ATV Ride</a></li>
<li><a href="activities.php#horse-riding">Horse Riding</a></li>
<li><a href="activities.php#bullock-cart-ride">Bullock Cart Ride</a></li>
</ul>
</li>
<li><a href="food.php">Food</a>
<ul class="dropdown">
<li><a href="food.php#breakfast">Breakfast</a></li>
<li><a href="food.php#lunch-dinner">Lunch / Dinner</a></li>
</ul>
</li>
<li><a href="tariff.php">Tariff</a>
</li>
<li><a href="gallery.php">Gallery</a>
<!--<ul class="dropdown">
<li><a href="#">Laptops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Printers</a></li>
</ul>-->
</li>
</ul>
</div><!--Nav menu end-->
</div>
</div><!--Header end--><div>
<div class="clear"></div>
<!-- InstanceBeginEditable name="page_content" -->
<div class="Slider-container"><!--Slider Start-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<?php /*?><div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/1.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/hqdefault.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/morning1.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/sunset-01.jpg" alt="Flower">
</div>
</div><?php */?>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/tours/ria-elevation-1010976.jpeg" alt="Chania">
</div>
<div class="item">
<img src="images/tours/ria-elevation-1010964.jpeg" alt="Chania">
</div>
<div class="item">
<img src="images/tours/ria-elevation-1010969.jpeg" alt="Flower">
</div>
<div class="item">
<img src="images/tours/maxresdefault.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!--slider end-->