Hide ion-nav-bar for single page?

Hi - pretty new to this framework and Angular, so please bear with me:

In Ionic Seed App, how would I hide the on just one page? I’ve tried playing around with ng-hide to no avail.

3 Likes

What do you want to hide? Or did you accidentally the hole page?

Sorry, my post got truncated somehow: I want to hide the nav bar in just one page. In the Seed App the nav bar is in the index.html file:

<ion-nav-bar type="bar-stable" 
         animation="nav-title-slide-ios7" 
         back-button-type="button-icon button-clear" 
         back-button-icon="arrow-back"></ion-nav-bar>

Add hide-nav-bar=“true” to your ion-view for that page.

<ion-view hide-nav-bar="true">
21 Likes

That’s no good - that will hide it for every page because the nav bar is in the index.html file.

As per the Seed app, the pages are called in through the ion-nav-view directive - surely I don’t have to move the nav-bar into each individual template?

The template for each page should have an ion-view tag?? That is the one that you set with hide-nav-bar.

Here is the standard tabs with navigation example hiding the header for the first page of the home tab and the contact tab. http://codepen.io/anon/pen/aKgEo

3 Likes

My apologies, I misread your post. That worked perfectly - thank you!

@Scott Facing similar trouble. I have hidden the nav-bar for Login page, using your trick, but the next page keeps showing back chevron button which I can’t get rid of (and clicking it brings one back to login page). Could you please help? (also, pretty new to this framework)

My code is based out of this which behaves perfectly but mine doesn’t. If my code helps:

<ion-nav-bar animation="nav-title-slide-ios7"
  type="bar-dark"
  back-button-type="button-icon"
  back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

<script id="tabs.html" type="text/ng-template">
    <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
        <!-- First Tab -->
        <ion-tab title="First" icon="icon ion-paper-airplane" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
       <!-- other tabs -->
    </ion-tabs>
</script>

<script id="home.html" type="text/ng-template">
    <ion-view title="'PreQ Order'" left-buttons="leftButtons">
        <ion-content has-header="true" padding="true">
            <p>Example of Ionic tabs. </p>
                <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">Scientific Facts</a>
            </p>
        </ion-content>
    </ion-view>
</script>

Without seeing more of your code it’s very hard to tell. Here is a fork of the pen you reference with the header of the login page hidden.

The only thing I changed was to add hide-nav-bar=“true” to the ion-view tag in sign-in.html and change has-header to “false” in the same template.

3 Likes

Thanks @Scott, now it works.

@Scott, this works, thank you.
Is there any way that I can hide he nav bar by calling the api in JS? I want to hide the nav bar when user scoll down.

1 Like

Hi, the $ionicNavBarDelegate has a showBar method that might do what you want?

1 Like

Thank you! I am new to ionic, could you please give some hint about how to use it?

Works Great :slight_smile: Included in the page which i need Header to hide… n works like charm :slight_smile:

1 Like

Just put $ionicNavBarDelegate.show(false); in the controller, within the function where you want to toggle the nav bar. Make sure you revert it in other states (I think, maybe test if you need to unhide it).

1 Like

Hi, I just find this post with the Codepen sample and I have a question.

Basically, the Home view has no nav bar but when you click on the Scientific Facts button, the nav var quickly appear for a moment with the “Home” title.

I was wondering if there was a way to avoid that?

use hide-nav-bar=“true” in ion-view has solved the issue for me

this is working fine hide-nav-bar=“true”

but i am getting new problem. I have added hide-nav-bar=“true” to login page, but the problem is it show blank header for some mili seconds and after the view loaded it hide as expected.


make ion-header transparent for that page using CSS

1 Like

hey, i know this is a pretty old question but im having a problem with this. when i make hide-nav-bar=“true” it also makes my hamburguer menu disappear in the other pages. all i got left is the bar and a back arrow. how can i fix this?