We Keep Coding

How to take off the y-overflow?

I am trying to build a vertical tab system. I have several problems yet, but I am having problems with it without overflowing in y position.
I believe I am not working out well with the content part.
<div class="content">
<h3 class="heading">Tab 4 Content</h3>
<p class="description">Lorem cumque.</p>
// ----------------- Variables
wrapper = $(".tabs");
tabs = wrapper.find(".nav-tab");
tabToggle = wrapper.find(".tab-toggle");
// ----------------- Functions
function openTab() {
var content = $(this).parent().next(".content"),
activeItems = wrapper.find(".active");
if (!$(this).hasClass('active')) {
$(this).add(content).add(activeItems).toggleClass('active');
wrapper.css('min-height', content.outerHeight());
}
};
// ----------------- Interactions
tabToggle.on('click', openTab);
// ----------------- Constructor functions
$(window).load(function() {
tabToggle.first().trigger('click');
});
button,
.button {
position: relative;
display: inline-block;
color: white;
padding: 0.75rem 2rem;
margin: 0 auto;
background-color: #374d72;
border: none;
width: 100%;
font-weight: bold;
font-size: 1.2rem;
text-align: center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
button:hover,
.button:hover {
background-color: #374d72;
}
button:hover:before,
button:hover:after,
.button:hover:before,
.button:hover:after {
color: #4cc4cf;
}
button:after,
button:before,
.button:after,
.button:before {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* ---------------------- Vertical Tabs */
.tabs {
position: relative;
min-height: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
/* ---------------------- Tab */
/* ---------------------- Content */
}
.tabs .nav-tab {
margin-bottom: 1px;
/* ---------------------- Tab Toggle */
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab {
float: left;
clear: left;
width: 30%;
}
}
.tabs .nav-tab .tab-toggle {
padding: 1rem 4rem 1rem 2rem;
position: relative;
outline: none;
width: 100%;
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle {
text-align: left;
}
}
.tabs .nav-tab .tab-toggle:after {
content: "\25BC";
position: absolute;
display: block;
right: 2rem;
top: 50%;
-webkit-transform: rotate(0deg) translateY(-50%);
-moz-transform: rotate(0deg) translateY(-50%);
-ms-transform: rotate(0deg) translateY(-50%);
-o-transform: rotate(0deg) translateY(-50%);
transform: rotate(0deg) translateY(-50%);
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle:after {
-webkit-transform: rotate(-90deg) translateX(50%);
-moz-transform: rotate(-90deg) translateX(50%);
-ms-transform: rotate(-90deg) translateX(50%);
-o-transform: rotate(-90deg) translateX(50%);
transform: rotate(-90deg) translateX(50%);
}
}
.tabs .nav-tab .tab-toggle.active {
color: #8099c2;
background-color: white;
cursor: default;
}
.tabs .nav-tab .tab-toggle.active:after {
color: #8099c2;
-webkit-transform: rotate(180deg) translateY(50%);
-moz-transform: rotate(180deg) translateY(50%);
-ms-transform: rotate(180deg) translateY(50%);
-o-transform: rotate(180deg) translateY(50%);
transform: rotate(180deg) translateY(50%);
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle.active:after {
-webkit-transform: rotate(-90deg) translateX(50%) translateY(0);
-moz-transform: rotate(-90deg) translateX(50%) translateY(0);
-ms-transform: rotate(-90deg) translateX(50%) translateY(0);
-o-transform: rotate(-90deg) translateX(50%) translateY(0);
transform: rotate(-90deg) translateX(50%) translateY(0);
right: 1rem;
}
}
.tabs .content {
max-height: 0;
overflow: hidden;
background-color: #efefef;
}
#media screen and (min-width: 10rem) {
.tabs .content {
max-height: none;
position: absolute;
right: 0;
top: 0;
width: 70%;
opacity: 0;
padding: 0rem 2rem 2rem 2rem;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
.tabs .content.active {
max-height: 1000px;
}
#media screen and (min-width: 10rem) {
.tabs .content.active {
max-height: none;
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.tabs .content>.heading {
font-size: 1.5rem;
margin-bottom: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="tabs">
<div class="nav-tab">
<button class="tab-toggle">Tab 1</button>
</div>
<div class="content">
<h3 class="heading">Tab 1 Content</h3>
<p class="description">Lorem cumque.</p>
</div>
<div class="nav-tab">
<button class="tab-toggle">Tab 2</button>
</div>
<div class="content">
<h3 class="heading">Tab 2 Content</h3>
<p class="description">Lorem cumque.</p>
</div>
</div>
</div>
</div>
I made it full width, but dont want it overflowing

How to get jQuery to wait until an animation is finished? [duplicate]

This question already has answers here:
How to use jQuery to wait for the end of CSS3 transitions?
(6 answers)
Closed 5 years ago.
I need to wait (prevent) until this animation (flip card) is finished, if you hover again while animation is running it triggers again and restart the animation.
1) I want leave finish the currently animation even you hover again or you hover out. This is what I have tried so far:
if(!$(this).find(".card").is(':animated')){
$(this).find(".card").toggleClass('flipped')
}
And this:
$(":animated").promise().done(function() {
$(this).find(".card").toggleClass('flipped')
});
2) If you re-hover flipped card (blue part) and you leave the cursor inside dont flip it again to the red part while cursor is inside. I tried this canceling setTimeout with clearTimeout but still doesnt work:
$(document).ready(function () {
var funct = 0
$(".container").hover(function () {
clearTimeout(funct);
$(this).find(".card").addClass('flipped')
}, function () {
var val = $(this).find(".card")
var funct = setTimeout(function () {
val.removeClass('flipped')
}, 2000)
})
})
Note: I use setTimeOut function because I need reverse flip card 2 seconds after you hover out and I want keep it.
Here is the working snippet code:
$(document).ready(function () {
$(".container").hover(function(){
$(this).find(".card").toggleClass('flipped')
}, function(){
var val = $(this).find(".card")
setTimeout(function(){
val.toggleClass('flipped')
}, 2000)
})
})
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front"><p>Test</p></div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Run a conditional check first to determine if the trigger class flipped has already been added to the element in question.
This will imply that the animation is still running or currently active (if the class flipped is already present).
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
$(document).ready(function() {
$(".container").hover(function() {
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
}, function() {
var val = $(this).find(".card")
setTimeout(function() {
val.removeClass('flipped')
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Then replace the .toggleClass() method with the .removeClass() method in your setTimeout() function for better "fool-proofing" and more reliable application during intended events - so that this class is never unintentionally added when it should simply be removed.
Edit
To address the issue you've pointed out in the comments, see what the embedded code snippet below demonstrates.
Essentially, a class is added as a flag to check against during specific events at specific times.
$(document).ready(function() {
$('.container').hover(function() {
if (!$(this).find('.card').hasClass('flipped')) {
$(this).find('.card').toggleClass('flipped')
}
$(this).find('.card').addClass('hovered'); /* add class - this will be our flag we'll check against */
}, function() {
var val = $(this).find('.card');
$(this).find('.card').removeClass('hovered'); /* remove class - if we refrain from hovering over again, the condition block below will return true and run the code within */
setTimeout(function() {
if(!val.hasClass('hovered')) {
val.removeClass('flipped')
}
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

I want to fill multi colors in progress bar as per value increases

Currently in semi-arc progress bar static colors are filled, but I want to fill it with multi colors as per value increases.
Meter point i.e circle is not coming completely on arc while rotation which i want completely on arc.
Thanks in advance.
var dial = $(".dial .inner");
var gauge_value = $(".gauge .value");
function rotateDial()
{
var deg = 0;
var value = Math.round(Math.random()*100);
deg = (value * 177.5) / 100;
gauge_value.html(value + "%");
dial.css({'transform': 'rotate('+deg+'deg)'});
dial.css({'-ms-transform': 'rotate('+deg+'deg)'});
dial.css({'-moz-transform': 'rotate('+deg+'deg)'});
dial.css({'-o-transform': 'rotate('+deg+'deg)'});
dial.css({'-webkit-transform': 'rotate('+deg+'deg)'});
}
setInterval(rotateDial, 2000);
html,
body {
padding: 0;
margin: 0;
}
body,
.dial {
background-color: #000;
overflow: hidden;
}
.gauge {
position: absolute;
width: 500px;
height: 500px;
top: 30px;
left: 50%;
margin-left: -250px;
border-radius: 100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
z-index: 9999;
}
.meter {
margin: 0;
padding: 0;
}
.meter > li {
width: 250px;
height: 250px;
list-style-type: none;
position: absolute;
border-top-left-radius: 250px;
border-top-right-radius: 0px;
transform-origin: 100% 100%;
;
-webkit-transform-origin: 100% 100%;
;
-ms-transform-origin: 100% 100%;
;
transition-property: -webkit-transform;
pointer-events: none;
}
.meter .low {
transform: rotate(0deg);
/* W3C */
-webkit-transform: rotate(0deg);
/* Safari & Chrome */
-moz-transform: rotate(0deg);
/* Firefox */
-ms-transform: rotate(0deg);
/* Internet Explorer */
-o-transform: rotate(0deg);
/* Opera */
z-index: 8;
background-color: #09B84F;
}
.meter .normal {
transform: rotate(47deg);
/* W3C */
-webkit-transform: rotate(47deg);
/* Safari & Chrome */
-moz-transform: rotate(47deg);
/* Firefox */
-ms-transform: rotate(47deg);
/* Internet Explorer */
-o-transform: rotate(47deg);
/* Opera */
z-index: 7;
background-color: #FEE62A;
}
.meter .high {
transform: rotate(90deg);
/* W3C */
-webkit-transform: rotate(90deg);
/* Safari & Chrome */
-moz-transform: rotate(90deg);
/* Firefox */
-ms-transform: rotate(90deg);
/* Internet Explorer */
-o-transform: rotate(90deg);
/* Opera */
z-index: 6;
background-color: #FA0E1C;
}
.dial,
.dial .inner {
width: 470px;
height: 470px;
position: fixed;
top: 10px;
left: 5px;
border-radius: 100%;
border-color: purple;
z-index: 10;
transition-property: -webkit-transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transform: rotate(0deg);
/* W3C */
-webkit-transform: rotate(0deg);
/* Safari & Chrome */
-moz-transform: rotate(0deg);
/* Firefox */
-ms-transform: rotate(0deg);
/* Internet Explorer */
-o-transform: rotate(0deg);
/* Opera */
}
.dial .arrow {
width: 35px;
height: 35px;
position: absolute;
top: 225px;
left: -1px;
/* Safari & Chrome */
/* Firefox */
/* Internet Explorer */
/* Opera */
background: #fff;
border-radius: 100%;
z-index: 1000;
margin-left: -29px;
}
.gauge .value {
font-family: 'Josefin Slab', serif;
font-size: 50px;
color: #ffffff;
position: absolute;
top: 142px;
left: 45%;
z-index: 11;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="gauge">
<ul class="meter">
<li class="low"></li>
<li class="normal"></li>
<li class="high"></li>
</ul>
<div class="dial">
<div class="inner">
<div class="arrow">
</div>
</div>
</div>
<div class="value">
0%
</div>
</div>

jQuery Content slider blocks responsive menu drawer

The content slider blocks the menu items of my responsive site
I have used the following css to accomplish this
/* http://www.menucool.com */
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:920px;
margin:0 auto; /*center-aligned*/
padding:20px;
box-shadow: 0 0 5px #BBB;
border:1px solid #CCC;
background-color:#FFF;
}
#slider, #slider .sliderInner {
width:680px;height:306px;/* Must be the same size as the slider images */
border-radius:0px;
}
#slider {
background-color:white;
float:left;
position:relative;
transform: translate3d(0,0,0);
}
/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider .video {
background:transparent url(video.png) no-repeat 50% 50%;
}
/* Caption styles */
#slider .mc-caption {
position:absolute;
width:400px;
height:auto;
padding:10px 0;/* 10px will increase height.*/
left:120px;
bottom:10px;
overflow:hidden;
font:bold 13px/16px Arial;
color:#069;
text-align:center;
background:rgba(255,255,255,0.2);
border:1px solid rgba(255,255,255,0.3);
border-radius: 5px;
}
#slider .mc-caption a {
color:#060;
}
/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper {
display:none;
}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
/* -- thumbnails -- */
#thumbs
{
float:left;
margin-left:10px;
width:230px;
font:normal 11px/13px Arial;
border-top:1px solid #CCC;
color:#666;
}
#thumbs .thumb
{
border:1px solid #CCC;
border-top:1px solid #FFF;
padding:11px 8px;
background:#EEE;
cursor:pointer;
}
#thumbs .thumb-on
{
background:#FFF;
}
#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}
#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}
/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}
And the following html for the slider
<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
<div id="slider">
<img src="img/3.jpg" alt="Caption for slide 1" />
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
<img src="slide-3.jpg" alt="Header File" />
<img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
<img src="img/3.jpg" alt="Caption for slide 4"/>
<img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
</div>
</div>
here is the html for the menu drawer
<header role="banner">
<div id="cd-logo"><img src="img/cd-logo.svg" alt="logo" onClick="#"></div>
<nav class="main-nav">
<ul><!-- insert more links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>
</header>
and its corresponding CSS
/* --------------------------------
Main components
-------------------------------- */
header[role=banner] {
position: relative;
height: 50px;
background: #343642;
}
header[role=banner] #cd-logo {
float: left;
margin: 4px 0 0 5%;
/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
header[role=banner] #cd-logo img {
display: block;
}
header[role=banner]::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
#media only screen and (min-width: 768px) {
header[role=banner] {
height: 80px;
}
header[role=banner] #cd-logo {
margin: 20px 0 0 5%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
z-index:inherit;
}
}
.main-nav {
float: right;
margin-right: 5%;
width: 44px;
height: 100%;
background: url("../img/cd-icon-menu.svg") no-repeat center center;
cursor: pointer;
}
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.main-nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
background: #292a34;
border-top: 1px solid #3b3d4b;
color: #FFF;
}
#media only screen and (min-width: 768px) {
.main-nav {
width: auto;
height: auto;
background: none;
cursor: auto;
}
.main-nav ul {
position: static;
width: auto;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
line-height: 80px;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.main-nav li {
display: inline-block;
margin-left: 1em;
}
.main-nav li:nth-last-child(2) {
margin-left: 2em;
}
.main-nav a {
display: inline-block;
height: auto;
line-height: normal;
background: transparent;
}
.main-nav a.cd-signin, .main-nav a.cd-signup {
padding: .6em 1em;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50em;
}
.main-nav a.cd-signup {
background: #2f889a;
border: none;
}
}
Can Anyone help me???

The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value:
.header {
...
z-index: 10;
}
For more information on stacking context there is an excellent article on mdn.

CSS tile flip on hover

I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?
.kachel_a_image_1 {
height:150px;
width:150px;
margin:auto auto;
margin-top:15px;
background:red;
}
.kachel_wrapper {
margin: auto auto;
width: 90%;
min-height: 450px;
margin-top: 55px;
text-align: center;
padding:10px;
padding-top:30px;
padding-bottom:20px;
}
.kachel_text {
font-size:10px;
color:white;
line-height:15px;
text-align:center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-left: 58px;
background: #6e7176;
display: inline-block;
margin-bottom:30px;
}
<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>
I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?

Use transform:
.kachel:hover{
transform: rotateX(150deg);
}
more Information: http://www.w3schools.com/css/css3_3dtransforms.asp
Also if you want to add a duration to the animation use transition-duration
.kachel{
transition-duration: 5s;
}
for changing the content after the hover use the pseudo element :after and the attribute content.
For example:
.kachel:hover:after{
content: 'hovering';
}
You may have to change it a bit, i haven't tested it.

Using transition and backface-visibility.
Probably the best soultion is to use simple transform and backface-visibility. jsfiddle
.front, .back{
width: 100px;
height: 100px;
}
.front{
background-color: blue;
}
.back{
background-color: red;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
Using #-webkit-keyframe
Another approach is to use animation and #-webkit-keyframes. However this will run the animation one time initially. (jsfiddle)
.box, .wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.back {
transform: rotateY(90deg);
background-color: red;
-webkit-animation: in 0.2s forwards;
animation in 1s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
.front {
transform: rotateY(90deg);
background-color: blue;
-webkit-animation: out 0.2s forwards;
animation out 0.2s forwards;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
.wrapper:hover .box.back {
-webkit-animation: out 0.2s forwards;
animation: out 0.2s forwards;
}
.wrapper:hover .box.front {
-webkit-animation: in 0.2s forwards;
animation: in 0.2s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
#-webkit-keyframes in {
from {
-webkit-transform: rotateY(90deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes out {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
<div class="wrapper">
<div class="box back"></div>
<div class="box front"></div>
</div>

For this I would use backface-visibility in conjunction with transform
<div class="container">
<div class="box front">image</div>
<div class="box back">Social</div>
</div>
CSS:
.container {
width: 180px;
height: 180px;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: red;
z-index: 2;
}
.back {
z-index: 1;
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.container:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's a JS fiddle
EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.
.wrapper {
width: 180px;
}
.wrapper:hover .container {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}