HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="ct-menu-searcher"> <div class="ct-menu-searcher__content"> <button type="button" class="ct-menu-searcher__button ct-js-close-button ct-js-menu-searcher__button morph-button-close"> close <i class="fa fa-times"></i> </button> <p> <i class="fa fa-search"></i> Search Anytime By Typing... <i class="fa fa-question-circle"></i> </p> <form id="main-searcher" method="#" action="#"> <label for="main-searcher-input" class="sr-only">Search</label> <input type="search" id="main-searcher-input" placeholder="Search"> <button type="submit" class="ct-menu-searcher__find-button"><i class="fa fa-search"></i></button> </form> </div> </div> |
Screenshot

Searcher example