Bootstrap - Responsive Navigation Bar

Responsive navigation bar with search box

by softwareinnovator

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<div class="row nav1">
    <nav class="navbar navbar-inverse" id="top-menu" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

                </button>
            </div>
            <!-- Collapse navigation -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="active">	<a href="#">HOME</a>

                    </li>
                    <li>	<a href="men.html">MEN</a>

                    </li>
                    <li>	<a href="#">WOMEN</a>

                    </li>
                    <li>	<a href="#">KIDS</a>

                    </li>
                    <li>	<a href="#">ACCESSORIES</a>

                    </li>
                    <li>	<a href="#">FOOTWEAR</a>

                    </li>
                    <li>	<a href="#">COSMETICS</a>

                    </li>
                    <li>	<a href="#">YOUR ACCOUNT</a>

                    </li>
                    <!-- <li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>

								<ul class="dropdown-menu">
								<li>
								<a href="#">Example1</a>
								</li>
								</ul>
								</li>
								-->
                </ul>
                <!-- Search box -->

            </div>
        </div>
 ...

CSS

.navbar {
    margin: 15px;
    font-family:'Raleway', sans-serif;
    background:#444444;
}
.navbar-inverse .navbar-nav>.active>a {
    background:#000000;
}
.navbar-inverse .navbar-nav > li > a {
    color: #F2DEDE;
}