Vfrdtyky

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

You need to add the class navbar-fixed-top to the nav, and delete navbar-static-top

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

Let me know if that help!

If you want to limit the width to, lets say 400px, you can do something like this

.navbar-fixed-top{

  max-width: 400px;

}