Question

我正在使用bootstrap3。我正面临一个问题。我有一个导航菜单，我需要在其中插入我的徽标，如下所示。

插入徽标以使其粘在导航栏上？

当我们向上滚动身体时，身体不应超出NAV栏。目前，它的导航上升。

enter image description here

任何人都可以告诉我们设计。

谢谢。

Answer 1

这正是我不久前要做的事情。这就是我所做的：

在导航栏标题中，将主标题<a class="navbar-brand" href="#">Project name</a>替换为您的徽标图形<a class="logo" href="#"><img src="/img/your-logo.png"></a>，如下所示：

<body>
    <div class="top-banner"></div> <!--this keeps the top distance and also an ideal place for the top banner-->

    <div class="navbar navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="logo" href="#"><img src="/img/your-logo.png"></a> <!-- your logo comes here -->
        </div>

在你的标题中包含一个主要的bootrap.css之后的自定义css（保持你的原始bootstrap.css完整，以便与未来的更新兼容）：

.top-banner {
height:107px; /* set this to whatever height your logo needs */
}

.logo {
position:absolute;
float:left;
top:-105px; /* again, use this to position your logo, you can also use left and right */
}

然后你可以向两个方向前进，或者将导航栏的边距设置为适当的高度：

.navbar {
    margin-bottom: 60px;
    position: relative;
}

或者您也可以在导航栏下方放置一个subheader div：

<div class="subheader">
    <div class="subheader-inner">
        <div class="container"> </div>
    </div>
<div>

并将此添加到您的css：

.subheader-inner {
    height:40px;
    margin-bottom:20px; /* or whatever values you need */
}

这样您可以使用副标题显示导航或其他信息，具体取决于您的设计。

希望这有帮助。

在导航菜单中插入徽标，我正在使用bootstrap3

1 个答案: