Bootstrap3のメニューバー(CSS/JavaScript)についての質問です。

.navbar-right をメニューバーの右に表示するのは、CSS だけでいけます。
質問の http://www.bootply.com/laro1SHOBl で追加した CSS に以下を追記してください。

@media (max-width: 768px) {
    ...

    .navbar-right {
        position: absolute;
        /* 位置は、お好みで調整してください */
        top: 0;
        right: 1em;
    }
}

Project name (.navbar-brand) の非表示は javascript で制御しないと駄目だと思います。

$('.navbar-collapse')
    .on('shown.bs.collapse', function() {
        $('.navbar-brand').hide();
    })
    .on('hidden.bs.collapse', function() {
        $('.navbar-brand').show();
    });

質問のサンプルを Fork して、これらのコードを追記したのがこちらです。
http://www.bootply.com/Imbfz6io2T

Project name(.navbar-brand)の非表示と.navbar-right の右上表示が、メニュー(.collapse)表示後に行われるため、動きが緩慢でぎごちなく見えてしまいます。

javascript を、少し変更してみました。

$('.navbar-collapse')
    .on('show.bs.collapse', function() {
        $('.navbar-brand').hide();
        $('.navbar-right').hide();
    })
    .on('shown.bs.collapse', function() {
        $('.navbar-right').show();
    })
    .on('hide.bs.collapse', function() {
        $('.navbar-brand').show();
        $('.navbar-right').hide();
    });

.nav-right の位置決めがメニュー表示後に確定するっぽいので、多少マシになった程度でなのですが。
http://www.bootply.com/DidFodfWct