Is it possible to have my sidebar push the content across when opened, while keeping the fixed navigation relative to its parent element instead of the viewport? The sidebar works fine in Firefox but breaks out of the parent in Chrome.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="sidebar">
</div>
<div class="content">
<div id="nav">
<p class="button"></p>
</div>
</div>
<script type="text/javascript">
$('.button').click(function(){
$('.content').toggleClass('slide');
});
</script>
</body>
</html>
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
#sidebar{
position: fixed;
left: 0;
top: 0;
width: 250px;
background: rgb(60,60,60);
float:left;
height: 600px;
z-index: -1;
}
.content{
position: relative;
left: 0;
top: 0;
width: 100%;
height:600px;
background: #FFF;
-moz-transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
}
.slide{
left: 250px;
}
#nav{
position: fixed;
top: 0;
background: #0af;
width: 100%;
box-shadow: 1px 1px #ddd;
}
#nav p:before{
content: "\e000";
}
.button{
font-family: 'icomoon';
font-size: 2em;
color: #FFF;
cursor: pointer;
margin: 10px;
}