0

使用一些 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 不能证明导航项的合理性）。

4

1 回答 1

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 像素。替代方案：

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

  • 如果您使用流畅的徽标宽度，则可以使用百分比。我在这里演示：http: //jsfiddle.net/0g9w8zza/6/。（在 Fiddle 中，徽标宽度为 20%，它仍然有效；上下缩放运行窗口进行检查）。

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

于 2015-01-20T19:03:51.640 回答