请问怎么在 header 导航栏加入 search框，并且后面加一个按钮，一个用户头像png

    .mui-icon-avata {  
                width: 50px;  
                height: 50px;  
                border-radius: 50%;  
                background-color: skyblue;  
                font-size: larger;  
                text-align: center;  
                padding-top: 20%;  
            }  
            header {  
                height: 55px;  
                min-height: 55px;  
            }

<header class="mui-bar mui-bar-nav">  
            <a id="bars" class="mui-icon  mui-pull-left">  
                <div class="mui-icon-avata">  
                    <span class="mui-icon mui-icon-person"></span>  
                </div>  
            </a>  
            <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" ></a>  

            <h1 class="mui-title">首页</h1>  
        </header>

//将info 替换成，自定义下css  
<div class="mui-input-row mui-search">  
                    <input type="search" class="mui-input-clear" placeholder="console.log('helloworld')">  
                </div>