Search box in navbar CSS

css_my_nav_menu_search.css

/* my-nav-menu-search menu item created in functions.php. Move it way over to the right */
.navbar .nav .my-nav-menu-search {
  float: right;
}
.navbar .nav {
  width: 100%;
}
 
/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
  display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
  position: absolute;
  left: -9999px;
  overflow: hidden;
}
 
/* Style the search input textbox */
.my-nav-menu-search .search-field {
  background: transparent;
  border: none;
  -webkit-box-shadow:    none;
  -moz-box-shadow:       none;
  box-shadow:            none;
  cursor: pointer;
  height: 26px;
  margin: 2px 0 2px 0;
  padding: 0 0 0 36px;
  position: relative;
  -webkit-transition: width 400ms ease;
  -moz-transition:    width 400ms ease;
  -o-transition:      width 400ms ease;
  transition:         width 400ms ease;
  width: 0px;
}
 
/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
  color: #5a5a5a;
  /* change the colour above if you are working with a dark navbar background */
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
  width: 70px;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
  margin: 0;
}
 
/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
  font-family: 'genericons';
  content: '\f400';
  position: absolute; /* this is the key to put it visually inside the search field */
  font-size: 19px;
  font-weight: normal;
  padding-top: 5px; /* tune this vertical alignment inside the search field, as needed */
  padding-left: 5px; /* tune this horizontal alignment inside the search field, as needed */
 
}
@media (max-width: 979px){
  .navbar .nav .my-nav-menu-search {
    float: left;
  }
  .navbar .nav {
    width: auto;
  }
}