<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css" rel="stylesheet" /> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav navbar-right"> <li class="active"><a href="index.php">الرئيسية</a></li> <li><a href="index.php?category=عاجل">عاجل</a></li> <li><a href="index.php?category=اخر_الاخبار">اخر الاخبار</a></li> <li><a href="index.php?category=علمي">علمي</a></li> <li><a href="index.php?category=رياضي">رياضي</a></li> <li><a href="index.php?category=اقتصادي">اقتصادي</a></li> <li><a href="index.php?category=سياسي">سياسي</a></li> <li><a href="index.php?category=محلي">محلي</a></li> <li><a href="index.php?category=امني">امني</a></li> <li><a href="index.php?category=عربي_ودولي">عربي ودولي</a></li> </ul> <ul class="nav navbar-nav navbar-left search-form"> <form class="form-inline navbar-form" action="index.php" method="get" > <div class="form-group pull-left"> <input type="text" name="بحث" placeholder="إكتب واضغط Enter"> </div> </form> </ul> </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div>

.navbar.navbar-fixed-top .navbar-inner{ background:#21505c; /*height:80px;*/ border-top: 4px solid #1abc9c; border-radius:0; } .navbar .nav > li{ float:right; text-shadow:0; } .navbar .nav > li:hover{ background: #1abc9c; } .navbar .nav > li > a{ line-height:60px; font-size:1.5em; text-shadow:none; color:#fff; } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus{ background: #1abc9c; box-shadow:none; color:#fff; } /*==============================*/ .search-form .navbar-form{ margin-top: 17px; padding-left:0; z-index: 999; } .search-form input[type=text] { width: 30px; height: 44px; box-sizing: border-box; border: 1px solid #0a2a32; outline: 0; border-radius: 0px; font-size: 1.2em; background-color: #163d47; background-image: url('image/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; color:#f3f3f3; padding: 4px 20px 4px 25px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; direction: rtl; text-align: right; } .search-form input[type=text]:hover { width: 100%; }