<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="" class="navbar-brand"> <img src="https://www.peoplepower.it/assets/img/logo-sm.png" alt="Home Page" id="top-logo" width="30px" style="transform: rotateY(0deg);"> </a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="navbar-main"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-map-marker"></i> USA</a> <ul class="dropdown-menu"> <li> <a href="perfil"> USA </a> </li> <li> <a href="perfil"> Canada </a> </li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, Vignesh A Sathiyanantham <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="perfil"> <span class="glyphicon glyphicon-cloud-upload"></span> Upload Profiles </a> </li> <li> <a href="perfil"> <span class="glyphicon glyphicon-user"></span> Manage Account </a> </li> <li class="divider"></li> <li><a href="logout"><span class="glyphicon glyphicon-off"></span> Logout</a></li> </ul> </li> </ul> </div> </div> </div> <div class="container"> <div id="custom-search-input"> <div class="input-group col-md-12"> <input type="text" class=" search-query form-control" placeholder="Search" /> <span class="input-group-btn"> <button class="btn btn-danger" type="button"> <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </div> </div> <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <div class="navbar-footer"> <p class="navbar-text pull-left">© PeoplePower. All rights reserved. </p> <a href="https://www.facebook.com/peoplepower.it/"><i id="social" class="fa fa-facebook fa-2x social-fb"></i></a> <a href="https://twitter.com/ipeoplepower"><i id="social" class="fa fa-twitter fa-2x social-tw"></i></a> <a href="https://plus.google.com/communities/109812481901539791763"><i id="social" class="fa fa-google-plus fa-2x social-gp"></i></a> <a href="mailto:asas@gmail.com"><i id="social" class="fa fa-envelope fa-2x social-em"></i></a> </div> </div> </div>

#social:hover { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); } #social { -webkit-transform:scale(0.8); /* Browser Variations: */ -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } i#social { line-height: 1.8; } /* Only Needed in Multi-Coloured Variation */ .social-fb, .social-tw, .social-gp, .social-em { color: black; } .social-fb:hover { color: #3B5998; } .social-tw:hover { color: #4099FF; } .social-gp:hover { color: #d34836; } .social-em:hover { color: #f39c12; } #custom-search-input { margin:0; margin-top: 10px; padding: 0; } #custom-search-input .search-query { padding-right: 3px; padding-right: 4px \9; padding-left: 3px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #custom-search-input button { border: 0; background: none; /** belows styles are working good */ padding: 2px 5px; margin-top: 2px; position: relative; left: -28px; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color:#D9230F; } .search-query:focus + button { z-index: 3; }