My navbar is currently set to float right and 330px left with absolute positioning. Everything is working fine in this setup, but I want it to be fixed. The problem arises when trying to convert it to a fixed position. I've tried various methods but none seem to work. Is there an easy method that I'm missing? Here's my code:
<div id="nav" >
<ul>
<li><img class="toggle-slide-button" src="assets/images/menu/menutoggle.png" alt=""></li>
<li><img class="Menu_icon"src="assets/images/menu/Home_icon.png" alt="">
<div class="menu_text">Home</div>
<img class="boxx" src="assets/images/menu/box.png" alt="">
</li>
</ul>
</div>
CSS
body{
overflow-x: hidden;
background: url(../images/Home/Screen_1/home_final_background.png) 100% 0 fixed;
}
ul{
list-style-type:none
}
.Menu_icon{
position: absolute;
z-index: -1;
}
#nav{ float: right; z-index: 152; right: -330px;
margin: 0;
padding: 0;
text-align: initial !important;
position: fixed;
}
.menu_text{
color:white;
font-size:24px;
height: 132px;
width: 390px;
position: absolute;
margin-left: 80px;
margin-top: 60px;
z-index: -2;
}
JS
$(document).ready(function(){
var state = true;
$(".toggle-slide-button").click(function () {
if (!state) {
$('#nav').stop().animate({left:330}, 1000);
state = true;
}
else {
$('#nav').stop().animate({left: 20}, 1000);
state = false;
}
});
});
$(document).ready(function(){
$(".boxx").hover(function() {
$(this).attr("src","assets/images/menu/box_hover.png");
}, function() {
$(this).attr("src","assets/images/menu/box.png");
});
});
EDIT: here is what I want to make
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
img{
user-drag: none;
-moz-user-select: none;
-webkit-user-drag: none;
}
body{
overflow-x: hidden;
background: url(http://i.imgur.com/z1y0hYN.png) 100% 0 fixed;
}
ul{
list-style-type:none
}
.Menu_icon{
position: absolute;
z-index: -1;
}
#nav{
float: right;
left:330px;
margin: 0;
padding: 0;
position: relative;
}
.menu_text{
color:white;
font-size:24px;
height: 132px;
width: 390px;
position: absolute;
margin-left: 80px;
margin-top: 60px;
z-index: -2;
}
</style>
<script>
$(document).ready(function(){
var state = true;
$(".toggle-slide-button").click(function () {
if (!state) {
$('#nav').stop().animate({left:330}, 1000);
state = true;
}
else {
$('#nav').stop().animate({left: 20}, 1000);
state = false;
}
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".boxx").hover(function() {
$(this).attr("src","http://i.imgur.com/MlmFvp3.png");
}, function() {
$(this).attr("src","http://i.imgur.com/FCKVSFe.png");
});
});
</script>
<div id="nav">
<ul>
<li><img class="toggle-slide-button" src="http://i.imgur.com/WsgovYE.png" alt=""></li>
<li><img class="Menu_icon"src="http://i.imgur.com/rYo7Utj.png" alt="">
<div class="menu_text">Home</div>
<img class="boxx" src="http://i.imgur.com/FCKVSFe.png" alt="">
</li>
</ul>
</div>