css - How to make my boostrap header fixed on scrolling

Question

I tried to look some online but that didnt work for me. how can I make the header fixed for this.

HTML for my header is below

<div id="navbar">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-inner">
            <div class="navbar-header">
                <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>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a ui-sref="about">Home</a></li>
                    <li><a ui-sref="route1">Home</a></li>
                    <li><a ui-sref="route2">Blog</a></li>
                    <li><a href="#">Referrals</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

CSS for my header is below

/* Navbar Styles */
#navbar {
    clear: both;
    border-radius: 0;
    border: 0;
    margin: 0;
    background: #f9f9f9;
    height: auto;
}
#navbar li a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    font-family:Cambria;
    color: #575757;
    padding-top: 20px;
    padding-bottom: 20px;
}
#navbar li a:hover {
    color: #7bcfdc
}

.dropdown-menu {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    width: 240px;
    padding: 0;
}
.dropdown-submenu {
    position:relative;
    border-radius: 0;
    padding: 0;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-1px;
    margin-left:-1px;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
}

#navbar .navbar-nav li a i {
    margin-left: 5px;
}
#navbar .navbar-nav li li a{
    background: #eee;
    text-transform: none;
    padding-top: 11px;
    padding-bottom: 11px;
}
#navbar .navbar-nav li li {
    position: relative;
}
#navbar .navbar-nav li li i {
    position: absolute;
    right: 20px;
    top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
    background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
    background: #ff4e4f;
    color: #FFF;
}




/*----- RESPONSIVE STYLES ------*/
@media screen and (max-width: 1199px) {
    .dropdown-submenu:hover .dropdown-menu {
      display: block;
    }
}
@media screen and (max-width: 768px) {
    .header-top p {
        text-align: center;
    }
    .header-top a {
        margin: 10px auto 0 auto;
        clear: both;
        display: block;
    }
}
@media screen and (min-width: 1200px) {
    #navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display:block;
    }
}

I am using angularjs, bootstrap. I have place this header in directive and calling the directive on Index.html. Please suggest how I can make header visible even on scrolling

标签： cssangularjstwitter-bootstrap

Answer 1

您需要将类添加navbar-fixed-top到导航中，然后删除navbar-static-top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

让我知道是否有帮助！

如果你想限制宽度，比如说400px，你可以做这样的事情

.navbar-fixed-top{
  max-width: 400px;
}