# Show/Hide the Ionic Navbar programmatically

**URL:** <https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913>\
**Category:** ionic-v1\
**Created:** [April 29, 2015, 5:27pm UTC](https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913 "2015-04-29T17:27:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![enricodeleo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enricodeleo/32/84666_2.png) [@enricodeleo](https://forum.ionicframework.com/u/enricodeleo)\
**Post date:** [April 29, 2015, 5:27pm UTC](https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913/1 "2015-04-29T17:27:55Z")

</div>

Hi everyone,  
I’m trying to show/hide the navbar for a specific view on tap, since I need both to show a fullscreen image and allow the user to go back to the previews view.

What I tried untill now:

solution #1:  
I added a $scope variable within the hide-nav-bar attribute but when the variable changes the navbar isn’t shown/hidden accordingly.

solution #2:  
within the view’s controller

```
var hideNavBar = angular.element( '#navbar' );

$cordovaStatusbar.hide();    
hideNavBar.attr('hide-nav-bar', 'false');

$scope.toggleFullscreen = function() {
  if ( $cordovaStatusbar.isVisible() === true ) {
    hideNavBar.attr('hide-nav-bar', 'false');
    $cordovaStatusbar.hide();
  }
  else {
    hideNavBar.attr('hide-nav-bar', 'true');
    $cordovaStatusbar.show();
  }

};

```

solution #3:

```
$ionicNavBarDelegate.showBar(false);
$cordovaStatusbar.hide();

$scope.toggleFullscreen = function() {
  if ( $cordovaStatusbar.isVisible() === true ) {
    $ionicNavBarDelegate.showBar(false);
    $cordovaStatusbar.hide();
  }
  else {
    $ionicNavBarDelegate.showBar(true);
    $cordovaStatusbar.show();
  }

};

```

the solution above kinda works, but when the navbar is shown again it is empty.

I also tried disabling the cache in the main controller holding the main view (where is the navbar’s markup) but nothing changed.

Any ideas?

---

<div class="post-metadata">

**Author:** ![ashteya](https://avatars.discourse-cdn.com/v4/letter/a/58f4c7/32.png) [@ashteya](https://forum.ionicframework.com/u/ashteya)\
**Post date:** [April 29, 2015, 6:45pm UTC](https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913/2 "2015-04-29T18:45:58Z")

</div>

Hi, I don’t know how your views are defined, but each view should have it’s own `<ion-view>` and on that you can set `hide-nav-bar`, so you should be able to configure it per view.

Check out this post [Hide ion-nav-bar for single page?](http://forum.ionicframework.com/t/hide-ion-nav-bar-for-single-page/1566/3)

---

<div class="post-metadata">

**Author:** ![enricodeleo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enricodeleo/32/84666_2.png) [@enricodeleo](https://forum.ionicframework.com/u/enricodeleo)\
**Post date:** [April 29, 2015, 10:33pm UTC](https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913/3 "2015-04-29T22:33:02Z")

</div>

@ashteya thank you for your reply.  
I apologize for not being clear enough (sorry I’m not a native speaker). What I’m trying to achieve is a navbar toggle on tap event. In fact what you suggests works but I need to do so programmatically within the very same view.

E.g. From a list view I select an item opening its own view that is without status bar and nvabar by default (so I can enjoy a full screen image for example). When I tap on the screen the status bar and navbar appear (with a back button) and viceversa.

Ideas?

---

<div class="post-metadata">

**Author:** ![ashteya](https://avatars.discourse-cdn.com/v4/letter/a/58f4c7/32.png) [@ashteya](https://forum.ionicframework.com/u/ashteya)\
**Post date:** [April 30, 2015, 6:59am UTC](https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913/4 "2015-04-30T06:59:26Z")

</div>

OK, I understand what you’re trying to do. I’d say the solution where you’re using the `$ionicNavBarDelegate` is the way to go, but if the header shows up as empty maybe there’s a bug in it.

It’s probably better to put up a [Codepen](http://codepen.io/) example of what you’re trying to do with the `$ionicNavBarDelegate` solution and ask one of the Ionic Devs to have a look at it.

---

<div class="post-metadata">

**Author:** ![poliveira](https://avatars.discourse-cdn.com/v4/letter/p/d9b06d/32.png) [@poliveira](https://forum.ionicframework.com/u/poliveira)\
**Post date:** [December 23, 2015, 1:00am UTC](https://forum.ionicframework.com/t/show-hide-the-ionic-navbar-programmatically/21913/5 "2015-12-23T01:00:39Z")

</div>

Just to update this topic, on the version 1.2.1 there is an Javascript object which contains functions to handle this question which becomes a smaller code block (1~2 lines).

[http://ionicframework.com/docs/api/utility/ionic.Platform/](http://ionicframework.com/docs/api/utility/ionic.Platform/)

Look into functions `showStatusBar` and `fullScreen`.

Eg:

```auto
// fullScreen([showFullScreen], [showStatusBar])
ionic.Platform.fullScreen(true, false) // this makes your View to resize to Fullscreen

```