Extending nav-bar functionality (or maybe how to use correctly?)

I have an index.html template (from pets example); which contains the nav-bar:

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

Great. I can hide or show this in my view pages via:

<view has-header="false" hide-nav-bar="true" has-tabs="false" padding="true">

note: has-header and has-tabs doesn’t actually seem to do anything…

Now what I’d like to do is extend or create my own nav-bar that contains a main-nav button on the right, which the following code provides:

<div class="bar bar-header bar-positive">
<h1 class="title">MY STATIC TITLE</h1>
<button class="button button-clear icon ion-navicon" onclick="window.location.href='#/nav'"></button>
</div>

However when i try to plug that code within <nav-bar></nav-bar> it doesn’t work. And if I get rid of it in favour of just that code straight up, I can’t easily hide it per view using hide-nav-bar="true" on my views.

Should i be adding some other piece of code to get a button on the top right of the nav bar that links back to my main nav page?

2nd to that, some of my pages do slide transitions (great), while other pages just jump back and forth like a regular link. (how do i always have transitions? and/or always have a back button)

Thanks for any help.