Bootstrap Navbar and Position Logo on Right Side of Menu

Question

Struggling a bit with some CSS navbar layouts and positioning the logo in the right hand side of the navbar.

Fiddle.

<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. Notice that the logo is positioned improperly.
2. When you hover over Menu 4, the effect is that the logo gets covered with the hover effect.

What I want to accomplish is something similar to this:

Notice that the logo is outside the navigation menu item, so that when I hover over the menu, the logo doesn't get covered.

Also, I need the logo to be positioned, right beside the collapsed navigation bar (as shown below) when the page is being viewed in mobile devices.

What proper css (or html tags) do I need to set to get this? Totally struggling with this for quite some time already.

Thanks.

Update: The fiddle must be viewed on Chrome (not sure why FF does not justify the nav items).

Answer 1

I think that I got the effect that you were going for. http://jsfiddle.net/0g9w8zza/4/. The following was added:

.nav {
    padding-right: 75px;
}

.navbar-toggle {
    position: absolute;
    right: 75px;
    top: 0;
}

Two things were added:

• The hover state problem was happening because the menu technically extended all the way to the right side. Adding padding-right gives the logo white space in which to live (with your existing position: absolute; right: 0.).
• The .navbar-toggle was also there, but hidden behind the image. position: absolute; right: 75px; puts it in the right place.

Note: Both classes assume your logo will always be 75 pixels. Alternate scenarios:

• If you are using a CSS Pre-Processor like Less or Sass, use a variable here to make changes easier.

• If you are using a fluid logo width, you can use percentages. I demonstrate this here: http://jsfiddle.net/0g9w8zza/6/. (In the Fiddle, logo width is 20%, and it still works; scale the Run window up and down to check).

(Let me know if this doesn't address your question, and I'd be happy to revisit).