Question

我有2个导航栏：第一个固定在页面顶部，第二个导航栏位于页眉和图像之后。

当我向下滚动页面时，我希望第二个导航栏进入第一个导航栏（现在可以正常工作）但是图标的世界（蓝色）是问题，我想在滚动时始终显示带有第二个导航栏的图标，但现在第二个导航栏也高于图标。

HTML

<div id="usermenu" class="usermenu" role="navigation">

 <div class="wrapper">
     <div class="brand pull-left">
         <a href="#"><span class="glyphicon glyphicon-home g-2x"></span></a>
</div>

<div class="pull-right">     
            <div class="btn-group">
<a href="#" class="btn btn-primary navbar-btn">Login</a><a href="#" class="btn btn-danger navbar-btn">Register</a>
            </div>
        </div>
    </div>
</div>  

<div class="wrapper">
    <div id="header" class="header clearfix">
        <div class="logo col-xs-12 col-sm-6 col-ph-6">
            <a href="#"><img src="http://gimepix.com/img/300-100-animals-003" alt="" title=""></a>
        </div>
    </div>
</div>     


<div class="clearfix"></div>

<div class="wrapper topbar">

    <nav id="nav" class="mainmenu clearfix" data-spy="affix" data-offset-top="100">
        <ul class="menu sf-menu">
            <li><a href="#">Testing &amp; Testing</a></li>
            <li><a href="#">Show &amp; Tell</a></li>
            <li><a href="#">Testing Shop</a></li>
            <li><a href="#">Bla Bla Test</a></li>
            <li><a href="#">I don't know</a></li>
            <li><a href="#">Other other</a></li>
        </ul>
    </nav>

.. content page ..
</div>

CSS

body {
background-color: #F4F4F4;
}  

.affix {
position: fixed;
top: 0;
z-index: 5;
}

#header, #usermenu {
width: 100%;
}

.header {
background: #FFF;
padding: 0em 1em;
color: #FFF;
padding-top: 3em;
}

.usermenu {
background-color: #2B2E29;
width: 100%;
position: fixed;
z-index: 5;
}

.wrapper {
width: 100%;
max-width: 1160px;
margin: 0 auto;
}

.brand {
padding: .5em;
font-size: 1em;
background: #347AB7;
margin-right: 5px;
}

.brand .glyphicon, .g-2x {
font-size: 24px;
color: #FFF;
}

#usermenu .navbar-btn {
margin-top: 4px;
margin-bottom: -4px;
}

.userpanel .btn {
padding-left: 1em;
}

.btn {
border-radius: 2px;
}

.mainmenu {
background-color: #2B2E29;
}

.brand .glyphicon, .g-2x {
font-size: 24px;
color: #FFF;
}

ul.menu {
padding: 0;
width: 100%;
margin: 0;
}

.menu li:first-of-type {
text-align: left;
}
.menu li {
list-style-type: none;
display: block;
float: left;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}

.menu li a {
color: #FFF;
}
.menu a, menu a:hover {
color: #FFF;
display: block;
padding: .75em .75em;
text-decoration: none;
text-transform: uppercase;
}

我使用Bootstrap 3.3.5。

我添加了z-index：5;在CSS for Affix中，这样第二个栏会进入第一个导航栏，但我不知道如何将第二个栏放到世界图标右侧（如菜单按钮）。

我尝试添加百分比来加贴CSS，例如：

.affix {
position: fixed;
top: 0;
z-index: 5;
left: 17%;
}

但是这样在不同的屏幕上我在第一个导航栏上有不同的第二个栏:(我不知道如何解释好，抱歉..

我想在第一个导航栏上只有第二个栏，在所有不同的断点上都可以看到按钮。

我该如何解决？感谢

此处布局：http://www.bootply.com/kl8HHLLBPy

附件：当第一个导航栏进入第一个导航栏时，如何显示始终显示图标

0 个答案: