html - Bootstrap Navbar と位置ロゴをメニューの右側に配置

Question

いくつかの CSS ナビゲーション バー レイアウトに少し苦労し、ナビゲーション バーの右側にロゴを配置しました。

フィドル。

<div class="container-fluid">
        <div class="navbar navbar-fixed-top navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand pull-right" href="#">
                    <img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2010/05/BP-Redesign-Contest-4-75x75.jpg" alt="Alternate Text for Image" >
                </a>

                <div class="navbar-offcanvas offcanvas navmenu-fixed-left">
                    <a class="navmenu-brand" href="#">eServices</a>
                    <ul class="nav nav-justified">
                        <li><a href="index.html">Menu 1</a></li>
                        <li><a href="index.html">Menu 2</a></li>
                        <li><a href="index.html">Menu 3</a></li>
                        <li><a href="index.html">Menu 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

1. ロゴが不適切に配置されていることに注意してください。
2. メニュー 4 にカーソルを合わせると、ロゴがホバー効果で覆われます。

私が達成したいのは、これに似たものです：

ロゴがナビゲーション メニュー項目の外側にあることに注意してください。そのため、メニューの上にカーソルを置いたときに、ロゴが隠れません。

また、ページがモバイル デバイスで表示されているときに、折りたたまれたナビゲーション バーのすぐ横にロゴを配置する必要があります (下図を参照)。

これを取得するには、どの適切な css (または html タグ) を設定する必要がありますか? かなり長い間、これに完全に苦労しています。

ありがとう。

更新:フィドルは Chrome で表示する必要があります (FF がナビゲーション項目を正当化しない理由は不明です)。