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.
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…!!