Aligning vertical navigation menu to the right side of the screen. Left: CSS property question.

Hi everyone,

I am trying to build a custom navigation bar which is displayed differently on screen sizes and I have stumbled upon a small issue, which I am sure has a very easy solution but I just can't seem to find it...

In order to understand the question, please have a look at the following screenshot of what I am trying to achieve: http://d.pr/i/17DfQ .

As you can see from the screenshot above, I have two different designs for the navigation menu which should appear when the user clicks the "hamburger" icon. On mobile version of the website this menu should take up an entire screen, whereas on iPad version of the website I would like this menu to slide out from right side of the screen to the left and take up only a portion of the screen (as shown on the screenshot).

I have managed to achieve the desired effect on mobile version of my website using the following Javascript and CSS:

jQuery(function($){
    $('.navbar-toggle').click(function(){
        $('.navbar-collapse').toggleClass('right');
        $('.navbar-toggle').toggleClass('indexcity'); // Gives the toggle button maximum z-index so that it would appear there at all times.
    });
});

@media only screen and (max-width: 767px) {

    .navbar-collapse {
        position: fixed;
        top: 0;
        transition: all 0.2s ease-out;
        height: 100%;
        width: 100%;
        left: 700px;
    }

    div#navbar.navbar-collapse.right {
        padding-top: 0;
    }   

    ul.nav.navbar-nav {
        margin-top: 50px;
    }
}

/* Custom classes for right-to-left sliding nav menu */

.indexcity {
    z-index: 9999;
}

.right {
    right: 0 !important;
    left: 0 !important;
}

Explanation: originally on both versions of the website this vertical navigation menu is hidden away from the user by using the following property: left: 700px (on mobile version) and left: 1000px (on iPad version). When the "hamburger" icon is pressed, these properties are changed by adding a new .right class with the following properties:

.right {
    right: 0 !important;
    left: 0 !important;
}

Thus the menu is sliding out from the right side to the left on both versions of the website.

This is how it works on mobile version (short video): http://d.pr/v/1bZHq , and this is how it works on iPad version (short video): http://d.pr/v/1iSeF . As you can see, on iPad version , this vertical menu is located on the left side of the screen but I want it to be located on the right side of the screen (as was shown on the screenshot above). I know that the problem lies in the following line of code:

left: 0 !important;

If I change the value from 0 to lets say 400px.. e.g left: 400px , this is what happens (short video): http://d.pr/v/2eLx , but at the same time it starts to affect the mobile version of my website (short video): http://d.pr/v/WyJc .

Any suggestions how I could achieve the desired effect on iPad version of my website while keeping the mobile version working?

Thank you very much in advance.