"nav with search hover"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!-- DEMO --> <nav> <div class="inner"> <input class="search_box" type=search placeholder="Search..."> <div class="search"><i class="fa fa-search"></i></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <script> // Search Toggle // $( ".search" ).click(function() { $( "ul" ).toggleClass( "active" ); $( ".search_box" ).toggleClass( "search_box_active" ); }); </script>
body { background: #2E2F40; font-family: 'Montserrat', sans-serif; } nav { max-width: 1000px; height: 0px; border-bottom: 100px solid #860255; border-left: 40px solid transparent; position: relative; margin: 0 auto; box-shadow: 20px 17px 27px rgba(0, 0, 0, 0.15); } nav::before { content: ''; margin-top: 10%; display: block; } nav .inner { width: 100%; height: 100px; position: absolute; right: 0; overflow: hidden; background: #860255; /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #860255), color-stop(100, #EF4B3F)); /* IE10+ */ background-image: -ms-linear-gradient(left, #860255 0%, #EF4B3F 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(left, #860255 0%, #EF4B3F 100%); /* Opera */ background-image: -o-linear-gradient(left, #860255 0%, #EF4B3F 100%); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(left, #860255 0%, #EF4B3F 100%); /* W3C Markup */ background-image: linear-gradient(to right, #860255 0%, #EF4B3F 100%); } nav .active { top: 80px !important; position: relative; transition: all .3s; } nav ul { float: right; list-style-type: none; line-height: 6.2; padding: 0; margin: 0; transition: all .3s; position: relative; top: 0; } nav li { display: inline-block; margin: 0; } nav li::before { content: ' / '; margin: 0 10px; color: rgba(255, 255, 255, 0.5); } nav li:first-child::before { display: none; } nav .search { width: 80px; height: 0px; float: right; color: #fff; font-size: 18px; border-bottom: 100px solid rgba(0, 0, 0, 0.1); border-left: 40px solid transparent; position: relative; transition: .3s; } nav .search::before { content: ''; } nav .search:hover { border-bottom: 100px solid rgba(0, 0, 0, 0.3); } nav .fa-search { position: relative; left: 25px; top: 38px; } nav input[type=search] { background: transparent; border: none; border-bottom: 2px solid #fff; -webkit-appearance: none; } nav input.search_box { position: absolute; font-size: 16px; color: #fff; line-height: 4; top: -100px; width: 320px; right: 130px; transition: all .3s; } nav .search_box_active { top: 15px !important; transition: all .3s; } nav input:focus { outline: none; } nav input::-webkit-input-placeholder { color: #fff; } nav input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 1px; width: 15px; background: transparent; border-radius: 50%; } nav input[type="search"]::-webkit-search-cancel-button::before { content: '+'; color: #fff; font-weight: bold; -webkit-transform: rotate(45deg); font-size: 21px; position: absolute; top: -10px; } nav a { color: #fff; text-decoration: none; }

Related: See More


Questions / Comments: