SCSS

by Bahman ParsaManesh

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

     <body id="home" class="scrollspy">
       <!-- section: navbar -->
       <div class="navbar-fixed">
         <nav class="teal">
           <div class="container">
             <div class="nav-wrapper">
               <a href="#" class="brand-logo">
                 LOGO
               </a>

               <ul class="right">
                 <li>
                   <form class="orange">
                     <div class="input-box">
                       <input id="search-bar" type="search" required>
                       <button class="btn" type="submit" style="background: blue;">
                         <i class="material-icons" style="border: 1px red solid;">search</i>
                       </button>
                     </div>
                   </form>
                 </li>
                 <li>
                   <a href="#home">Home</a>
                 </li>
               </ul>
             </div>
           </div>
         </nav>
       </div>
     </body>

SCSS

form {
  position: relative;
  width: 250px;
}

.input-box {
  display: inline-flex; 
  border: 1px black solid;
  height: 64px;
  line-height: 64px;
  margin: 0;
  padding: 0;
  position: absolute;
  background-color: red;
}