How to add a search box with icon to the navbar using materialize css?
22,119
I have found that : https://ampersandacademy.com/tutorials/materialize-css/navbar-with-autocomplete-search-box
You have to add a div element in the li element of your navbar ul list.
<nav class="white">
<div class="nav-wrapper">
<a href="#" class="brand-logo red-text">Logo</a>
<ul class="hide-on-med-and-down right">
<li>
<div class="center row">
<div class="col s12 " >
<div class="row" id="topbarsearch">
<div class="input-field col s6 s12 red-text">
<i class="red-text material-icons prefix">search</i>
<input type="text" placeholder="search" id="autocomplete-input" class="autocomplete red-text" >
</div>
</div>
</div>
</div>
</li>
<li><a href="sass.html" class="red-text">Sass</a></li>
<li><a href="badges.html" class="red-text">Components</a></li>
<li><a href="collapsible.html" class="red-text">JavaScript</a></li>
</ul>
</div>
</nav>
Related videos on Youtube
Author by
Maksym Suprunenko
Updated on April 09, 2020Comments
-
Maksym Suprunenko over 3 years
I want to embed a simple input search box. I tried to use code like in bootstrap, but I can't make it to work. I have no clue how to do it.
I have this bootstrap code:
<div class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div>
Reference: How to add a search box
-
andreas about 7 yearsQuestions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example.
-