CSS fixed div with float right and left positioning

Question

So I have navbar with float right and 330px left. Everything is working fine with absolute position but I want fixed and here comes the problem. How I'm suposed to do it ? I also tried various of methods but they don't seem to work I really hope that there is some really easy method but I can't figure it out. Here is my code HTML

<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> 

Answer 1

When using position:fixed you can position the #nav element to the right side of the screen by either adding: right: 0 or left: 100% (not both). Since you only want a small part of the #nav to be visible by default, you can push the element 'out of the screen' by setting a negative margin, for example:

#nav {
    position: fixed;
    left: 100%;
    width: 400px;
    margin-right: -300px; /* (400px-300) keeps 100px of the element in sight */
}

Here's a working example of your code with #nav set to position:fixed :

 $(document).ready(function() { var state; $(".toggle-slide-button").click(function() { if (!state) { $('#nav').stop().animate({ 'margin-left': '-330px' }, 1000); state = true; } else { $('#nav').stop().animate({ 'margin-left': '-65px' }, 1000); state = false; } }); }); $(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"); }); }); 

 .just-a-dummie-element { height: 2600px; } body { overflow-x: hidden; background: url(http://i.imgur.com/z1y0hYN.png) 100% 0 fixed; } ul { list-style-type: none; margin: 0; padding: 0; } .toggle-slide-button { display: block; cursor: pointer; } .Menu_icon { position: absolute; z-index: -1; display: block; cursor: pointer; } #nav { position: fixed; top: 40px; left: 100%; margin: 0 0 0 -65px; padding: 0; } .menu_text { color: white; font-size: 24px; height: 132px; width: 390px; position: absolute; margin-left: 80px; margin-top: 60px; z-index: -2; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="just-a-dummie-element">..just to make the page loger!</div> <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> 

Also, just a simple tip: don't use javascript to change the background of the .boxx on :hover , just use css.