移动端头部(右侧按钮)

<div class="header">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container" id="header-width">
            <div class="navbar-header">
                <div class="nav navbar-nav logo pull-left">
                    <a class="navbar-brand" href="http://" style="padding:0px;">
                        <!--<img src="images/logo.png" style="height: 36px;">-->
                    </a>
                </div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <div class="nav navbar-nav logo hidden-xs" id="content" style="margin-left: 20px;">
                    <a class="navbar-brand" href="http://www.juwai.com" style="padding:0px;">
                    </a>
                </div>
                <ul class="nav navbar-nav navbar-right top-nav">
                    <li><a target="_blank" href="http://">section <span>|</span></a></li>
                    <li><a target="_blank" href="http://">section<span>|</span></a></li>
                    <li><a target="_blank" href="http://">section<span>|</span></a></li>
                    <li><a target="_blank" href="http://">section<span>|</span></a></li>
                    <li><a target="_blank" href="http://">section<span>|</span></a></li>
                    <li><a target="_blank" href="http://">section<span>|</span></a></li>
                    <li class="hidden-sm"><a target="_blank" href="http://">section<span>|</span></a></li>
                    <li class="hidden-sm"><a target="_blank" href="http://">section<span>|</span></a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>
.header {
    position: relative;
    z-index: 100;
    background: #ECECEC;
}
.header > nav.navbar {
    margin: 0 auto;
    border: none;
    background: #ECECEC;
    height: 30px;
}
.header > nav.navbar a {
    padding: 14px 5px;
    font-size: 14px;
}
.header > nav.navbar a:hover {
    color: red !important;
}
.header > nav.navbar .navbar-collapse {
    background: #ECECEC;
}
.navbar-header{
    border-bottom: 1px solid;
}
.navbar-nav{
    margin: 0;
}
.navbar{
    height:30px;
    margin-bottom: 0;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ccc;
}
.navbar-collapse {
    max-height: 340px;
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-overflow-scrolling: touch;
}

猜你喜欢

转载自blog.csdn.net/ttn456456/article/details/79526935