0
Я новичок в программировании. Я использую bootstrap, и я пытаюсь настроить Nav Nav Overlay над слайдером в верхней части веб-сайта.Nav bar не лежит над верхним слайдером
Может ли кто-нибудь сказать мне, что я делаю неправильно, или указать мне в правильном направлении? Вот ссылка на сайт на codepen
http://codepen.io/anon/pen/MwLBKv
HTML
<!-- bootstarp-css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- FontAwesome
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!--// bootstarp-css -->
<!-- css -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--// css -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<!--/fonts-->
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<!--start-smoth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
<!--start-smoth-scrolling-->
</head>
<body>
<!-- banner -->
<div id="home" class="banner a-banner">
<!-- container -->
<div class="container">
<div class="head-logo">
<a href="index.html"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6FfLzPB1MpLiIxrIapoSbEf0PFvTjQ3TbcLrQCijCN68LfWZi" alt="" /></a>
</div>
<div class="top-nav">
<ul class="nav1">
<li class="hvr-sweep-to-bottom"><a href="contact.html">Contact<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></a></li>
<li class="hvr-sweep-to-bottom"><a href="services.html">Services<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></a></li>
<li class="hvr-sweep-to-bottom"><a href="about.html">About<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></a></li>
<li class="hvr-sweep-to-bottom active"><a href="index.html">Home<i><img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png" alt=""/></i></a></li>
<div class="clearfix"> </div>
</ul>
<!-- script-for-menu -->
<script>
$("span.menu").click(function() {
$("ul.nav1").slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
</div>
<!-- car -->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Recovery</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Equiped for any Job</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div> </div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div> </div>
</div>
</div>
<!-- car -->
</div>
<!-- //container -->
</div>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
Можете уточнить, что вы пытаетесь сделать? Вы говорите о том, что рухнувший навигатор (гамбургер) появляется вместо коротких пунктов меню, когда экран становится меньше? – steakchaser
Я не уверен, что вы подразумеваете под наложением. [Это] (http://imgur.com/h7kxPrh) - это то, что я вижу. Какое * должно выглядеть меню? – wavemode
Я пытаюсь получить меню и логотип, чтобы он был поверх слайдера, а не поверх/поверх него. Спасибо за вашу помощь – therealtomhanks