菜单右侧的Bootstrap Navbar和Position Logo

Question

使用一些CSS导航栏布局挣扎并将徽标放在导航栏的右侧。

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. 请注意，徽标位置不正确。
2. 当您将鼠标悬停在菜单4上时，效果是徽标会被悬停效果覆盖。

我想要完成的是类似的事情：

请注意，徽标位于导航菜单项之外，因此当我将鼠标悬停在菜单上时，徽标不会被覆盖。

此外，在移动设备中查看页面时，我需要将徽标放置在折叠导航栏旁边（如下所示）。



我需要设置什么样的css（或html标签）才能获得此功能？很长一段时间以来一直在努力解决这个问题。

感谢。

更新：必须在Chrome上查看fiddle（不确定为什么FF不能证明导航项目的合理性）。

Answer 1

我认为我得到了你想要的效果。 http://jsfiddle.net/0g9w8zza/4/。添加了以下内容：

.nav {
    padding-right: 75px;
}

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

增加了两件事：

• 悬停状态问题正在发生，因为菜单技术上一直延伸到右侧。添加padding-right为徽标提供了空白区域（使用现有的position: absolute; right: 0。）。
• .navbar-toggle也在那里，但隐藏在图像后面。 position: absolute; right: 75px;将其放在正确的位置。

注意：这两个类都假设您的徽标始终为75像素。替代方案：

• 如果您使用的是像Less或Sass这样的CSS预处理器，请在此处使用变量以便更改。

• 如果使用流体徽标宽度，则可以使用百分比。我在这里证明了这一点：http://jsfiddle.net/0g9w8zza/6/。 （在小提琴中，徽标宽度为20％，它仍然有效;上下运行窗口以进行检查）。

（如果这不能解决您的问题，请告诉我，我很乐意再次访问）。