定制离子导航棒

Question

如何自定义ion-nav-bar。

<div class=" bar bar-header navbar-fixed-top navbar-header ">
<div class="container row">
           <div class="col-33">
            <a class="navbar-brand" href="#">
                        <h1>ROCK 'N' GRILL<br>
                        <span>Pitampura New Delhi...</span></h1>
                    </a>
                </div>
            <div class="col-50 topPull">
            <button class="button-icon" on-swipe-down="changeSlide()"><img src="img/topImg.jpg"></button>
                           </div>
            <div class="col-33 menuItems">

                            <a class="menuItems" href="#">Menu1</a>

                            <a class="menuItems" href="#">Menu2</a>

            </div>           
        </div>               

</div>

但是，这是一个静态标头。我希望它将它转换为离子导航条，但它打破了它。如何自定义它以用作ion-nav-bar而不是标题？

演示：http://play.ionic.io/app/000722ac6197