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> 
Share:
22,119

Related videos on Youtube

Maksym Suprunenko
Author by

Maksym Suprunenko

Updated on April 09, 2020

Comments

  • Maksym Suprunenko
    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

Related