Header Bar icon not showing up until i refresh the page

I am trying to use this for header bar:

    <div class="bar bar-header" style="background:Transparent; border:none;">
        <button class="button button-icon button-clear icon ion-navicon" menu-toggle="left" style="
             margin-left:10px; font-size:30px;"></button>   
     </div>

It appears correctly but only after refreshing once in the browser.
It appears by default if i put it inside ion-content… but here the issue is it will get scrolled up…

Help please…

EDIT

Actually its the nav icon not showing until i refresh. i noticed header bar is present… i didnt get it before since its kept transparent.

Anyways please help me with that icon…

Can you try using ion-header-bar? Like this:

<ion-header-bar class="bar-clear">
   <div class="buttons">
     <button class="button button-clear button-dark icon ion-navicon" menu-toggle="left" style="margin-left:10px; font-size:30px;"></button>
   </div>
 </ion-header-bar>

Codepen: http://codepen.io/brandyshea/pen/dYRgBj?editors=101

Didn’t work !! In that particular state i have disabled ion-nav-bar using hide-nav-bar=“true”.

<ion-view view-title="" hide-nav-bar="true">

Then i am adding my custom header like above.

is that the reason ? when i used your header bar icon still was not visible and i cldnt even make it transparent

The more information you provide, the easier it is to help. If you could make a codepen reproducing this problem, I could help more. :smile: I’ve forked the codepen above to give it a hidden ion-nav-bar and the same header above on that view. It is working for me: http://codepen.io/brandyshea/pen/BoZGYj?editors=101

i dont know how we do that on codepen… never did it before…!! still I will try to…!!