<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" style="background-color:#000;float:center; width:100%;right: 220px;"> <div class="container" style="float:left;" style="backgroung-color:black"> <div class="collapse navbar-collapse" id="navbar-collapse-1" style="backgroung-color:black"> <ul class="nav navbar-nav navbar-right" style="backgroung-color:black"> <li><a href="index.php"><font>Home</font></a></li> <li><a href="CONTACT.php"><font>Contact</font></a></li> <li><a href="#"><font>About</font></a></li> <li> <a class="btn btn-default btn-md" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Suggested Sellor <span class="glyphicon glyphicon-chevron-down"></span></a> </li> </ul> <ul class="collapse nav navbar-nav nav-collapse nav navbar-nav navbar-right navbar-collapse-1 collapse navbar-collapse" id="nav-collapse1"> <li> <a class="btn btn-default btn-md" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1"> <font>Back</font> <span class="glyphicon glyphicon-chevron-up"></span></a></li> <li><a href="Sellor.php?area=karachi&subarea=saddar"><font>Islamabad</font></a></li> <li> <a class="btn btn-default btn-md" data-toggle="collapse" href="#nav-collapse12" aria-expanded="false" aria-controls="nav-collapse12">Karachi  <span class="glyphicon glyphicon-chevron-down"></span></a> </li> <li><a href="Sellor.php?area=karachi&subarea=saddar"><font>Lahore</font></a></li> <li><a href="Sellor.php?area=karachi&subarea=saddar"><font>Peshawar</font></a></li> </ul> <ul class="collapse nav navbar-nav nav-collapse nav navbar-nav navbar-right" id="nav-collapse12"> <li> <a class="btn btn-default btn-md" data-toggle="collapse" href="#nav-collapse12" aria-expanded="false" aria-controls="nav-collapse12"><font >Back</font> <span class="glyphicon glyphicon-chevron-up"></span></a></li> <li> <a href="Sellor.php?area=karachi&subarea=Malir"><font>Malir</font></a></li> <li><a href="Sellor.php?area=karachi&subarea=Sarena"><font>Sarena</font></a></li> <li><a href="Sellor.php?area=karachi&subarea=Paposh"><font>Paposh</font></a></li> <li><a href="Sellor.php?area=karachi&subarea=Orangi"><font>Orangi</font></a></li> <li><a href="Sellor.php?area=karachi&subarea=Korangi"><font>Korangi</font></a></li> <li><a href="Sellor.php?area=karachi&subarea=Saddar"><font>Saddar</font></a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav><!-- /.navbar --> </div><!-- /.container-fluid -->

/* Code snippet by maridlcrmn for Bootsnipp.com Follow me on Twitter @maridlcrmn */ font{ color:#fff; } font:hover{ color:red; } .navbar-nav.navbar-right .btn { float:left;position: relative; z-index: auto; padding: 4px 2px; margin: 10px 5px auto; transition: transform 0.3s;text-align:left; } .navbar .navbar-collapse { position: relative; overflow: hidden !important; } .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 4px; } .navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0px; right: 10px; bottom: 0; margin: 0; padding-right: 0px; padding-left: 20px; width: 100%; } .navbar.navbar-default .nav-collapse { background-color: #000; } .navbar.navbar-inverse .nav-collapse { background-color: #000; } .navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; } .nav-collapse>li { float: right;padding-left:2px;color:blue; } .btn.btn-circle { border-radius: 10px; } .btn.btn-outline { background-color: #000; } .navbar-nav.navbar-right .btn:hover { background-color:#000;float:left; border-color: pink; color: #fff; } .navbar-nav.navbar-right .btn:not(.collapsed) { background-color:#000;float:left; border-color: #000; color: #fff; } .navbar.navbar-default .nav-collapse, .navbar.navbar-inverse .nav-collapse { height: auto !important;background-color:#000; transition: transform 0.3s; transform: translate(0px,-50px); } .navbar.navbar-default .nav-collapse.in, .navbar.navbar-inverse .nav-collapse.in { transform: translate(0px,0px); } @media screen and (max-width: 767px) { .navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } .navbar .nav-collapse { margin: 7.5px auto; padding: 0; } .navbar .nav-collapse .navbar-form { margin: 0; } .nav-collapse>li { float: none; } .navbar.navbar-default .nav-collapse, .navbar.navbar-inverse .nav-collapse { transform: translate(-100%,0px); } .navbar.navbar-default .nav-collapse.in, .navbar.navbar-inverse .nav-collapse.in { transform: translate(0px,0px); } .navbar.navbar-default .nav-collapse.slide-down, .navbar.navbar-inverse .nav-collapse.slide-down { transform: translate(0px,-100%); } .navbar.navbar-default .nav-collapse.in.slide-down, .navbar.navbar-inverse .nav-collapse.in.slide-down { transform: translate(0px,0px); } }