Search input in navigation bar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

Search input in navigation bar

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta name="description" content=""> 
  <meta name="keywords" content=""> 
  <meta name="robots" content="index,follow"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css"> 
  <style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {<!--  w w w.j  a va  2  s.  c o  m-->
   --main-bg-color:Chartreuse;
   --main-bg-color-gradient:linear-gradient( yellow, rgba(19, 27, 35, 0.9));
}

body,
html {
   height:100%;
   width:100%;
   margin:0;
   font-size:17px;
   background-color:blue;
}

nav {
   position:fixed;
   top:0;
   left:0;
   width:100%;
}

.nav-wrapper {
   display:flex;
   max-height:51px;
}

.logo-text {
   display:flex;
   width:301px;
   background-color:pink;
   align-items:center;
}

.logo-svg {
   display:block;
   width:51px;
   height:51px;
   background-color:OrangeRed;
   margin-right:11px;
}

.brand-logo {
   text-decoration:none;
}

.input-field {
   display:flex;
   align-items:center;
   width:calc(100% - 601px);
}

input#autocomplete-input {
   display:block;
   margin:0 auto;
   width:91%;
   max-width:701px;
   height:31px;
}

.nav-wrapper ul {
   display:flex;
   justify-content:space-around;
   align-items:center;
   width:301px;
   padding:0;
   margin:0;
   background-color:grey;
}

.nav-wrapper ul li {
   list-style:none;
   height:100%;
   background-color:BlueViolet;
   line-height:51px;
   padding:0 11px;
   transition:background-color .4s ease;
}

.nav-wrapper ul li:hover {
   background-color:Chartreuse;
}

.nav-wrapper ul li a {
   text-decoration:none;
}
</style> 
 </head> 
 <body> 
  <nav> 
   <div class="nav-wrapper"> 
    <a href="#" class="brand-logo"> 
     <div class="logo-text" href="#"> 
      <object href="#" class="logo-svg"></object>Lorem 
     </div> </a> 
    <div class="input-field"> 
     <input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.."> 
    </div> 
    <ul class="right"> 
     <li> <a href="#">Lorem </a> </li> 
     <li> <a href="#">Lorem </a> </li> 
     <li> <a href="#">Lorem </a> </li> 
     <li> <a href="#">Lorem </a> </li> 
    </ul> 
   </div> 
  </nav>  
 </body>
</html>

Related Tutorials