Tengo una barra de navegación que tiene un efecto de desplazamiento sobre los botones. Además, cada vez que una página está activa, ese botón tiene un borde a la derecha para mostrar que es la página que está abierta actualmente. Básicamente, lo que quiero es que el botón activo no tenga un efecto de desplazamiento, porque el efecto de desplazamiento cubre el borde.

$(window).load(function() {
    // Animate loader off screen
    $(".loader").fadeOut("slow");;
});

function homeTransition()
{   
    $(this).toggleClass('activePage');

    if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
        document.getElementById("aboutContent").className = " animated slideOutRight";
    }
    if(document.getElementById("projectsContent").className.indexOf("slideInUp") !== -1){
        document.getElementById("projectsContent").className = " animated slideOutUp";
    }
    if(document.getElementById("contactContent").className.indexOf("slideInUp") !== -1){
        document.getElementById("contactContent").className = " animated slideOutUp";
    }
    document.getElemenatById("al-saba").className = " animated bounceInDown";
}

function aboutTransition()
{   
    document.getElementById("al-saba").className = " animated bounceOutUp";
    document.getElementById("aboutContent").style.visibility = "visible";
    document.getElementById("aboutContent").className = "activePage animated slideInLeft";

    document.getElementById("projectsContent").className = " animated slideOutUp";
    document.getElementById("contactContent").className = " animated slideOutUp";
}

function projectsTransition()
{   
    $(this).toggleClass('activePage');

    document.getElementById("al-saba").className = " animated bounceOutUp";
    document.getElementById("projectsContent").style.visibility = "visible";
    document.getElementById("projectsContent").className = "activePage animated slideInUp";

    document.getElementById("aboutContent").className = " animated slideOutRight";
    document.getElementById("contactContent").className = " animated slideOutUp";
}

function contactTransition()
{
    $(this).toggleClass('activePage');

    document.getElementById("al-saba").className = " animated bounceOutUp";
    document.getElementById("contactContent").style.visibility = "visible";
    document.getElementById("contactContent").className = "activePage animated slideInUp";

    document.getElementById("aboutContent").className = " animated slideOutRight";
    document.getElementById("projectsContent").className = " animated slideOutUp";
}

//Menu
$(function() {
    function expand() {
        $(this).toggleClass("on");
        $(".menu").toggleClass("active");
    };

    $('.noselect').click(function() {
        $('.noselect').removeClass('activePage');
        $(this).toggleClass('activePage');
    });

    $(".button").on('click', expand);
});

body {
     font-family: "Source Sans Pro", sans-serif;
     color: #ccc;
     z-index: -100;
     background-color: black;
     overflow: hidden;
     text-align: center;
}
 .menu{
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     padding: 0;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.6);
     width: 250px;
     box-sizing: border-box;
     transition: all 250ms;
     -webkit-transform: translateZ(0) translateX(-100%);
     transform: translateZ(0) translateX(-100%);
     text-align:center;
     box-shadow: 0 0 10px #000;
}
 .active {
     transform: translateZ(0) translateX(0);
     transform: translateZ(0) translateX(0);
     -webkit-transition: 0.4s;
     transition: 0.4s;
     color: #e5e5e5;
}
 ul{
     padding:0;
     list-style:none;
     font-size:14px;
}
 li{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     font-family: "Raleway";
     width: 250px;
     padding: 40px 5px;
     color: #a7a7a7;
     font-size: 1.8em;
     font-weight: 300;
     cursor: pointer;
     transition: all .4s ease-in-out;
}
 li:hover {
     color: white;
     background-color: #38d8b4;
     -o-transition:.6s;
     -ms-transition:.6s;
     -moz-transition:.6s;
     -webkit-transition:.6s;
     transition:.6s;
}
 .liSeperator {
     width: 100%;
     padding: 1px;
     color: (0, 0, 0, .4);
}
 .content {
     position: relative;
     width: 240px;
}
 .button {
     width:22px;
     height:40px;
     margin:80px 97px;
     padding: 10px;
     cursor:pointer;
     transition: all .2s ease-in-out;
}
 .button:hover{
     transform: scale(1.2);
}
 .line {
     width: 40px;
     height: 2px;
     background-color:#fff;
     transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
 .line.first{
     transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
 .line.second{
     transform: translateX(-10px) translateY(19px) rotate(0deg);
}
 .button.on .line.top{
     width: 40px;
     transform: translateX(-10px) translateY(20px) rotate(45deg);
}
 .button.on .line.bottom{
     width: 40px;
     transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
 .activePage li {
     transition: all .1s ease-in-out;
     color: white;
     border-right: 8px solid #38d8a1;
}

<div id="wrapper">
                                    <div class="menu">
                                        <h1 class="noselect">MENU</h1>
                                        <ul>
                                                <li id="home" class="noselect" onclick="homeTransition()">
                                                    <i class="fa fa-home"></i> home
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="about" class="noselect" onclick="aboutTransition()">
                                                    <i class="fa fa-user"></i> about                                        
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="projects" class="noselect" onclick="projectsTransition()">
                                                    <i class="fa fa-code"></i> projects
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="contact" class="noselect" onclick="contactTransition()">
                                                    <i class="fa fa-paper-plane"></i> contact
                                                </li>
                                        </ul>
                                    </div>
                                    <div class="content animated fadeInDown">
                                        <div class="button">
                                            <div class="line first top"></div>
                                            <div class="line second bottom"></div>
                                        </div>
                                    </div>