# 1 SideMenu, Multiple Ion View Headers

**URL:** <https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050>\
**Category:** ionic-v1\
**Created:** [August 11, 2014, 11:52am UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050 "2014-08-11T11:52:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Melina](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/melina/32/13309_2.png) [@Melina](https://forum.ionicframework.com/u/Melina)\
**Post date:** [August 11, 2014, 11:52am UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/1 "2014-08-11T11:52:44Z")

</div>

Hi :),

I use the last version of Ionic (Beta 11), and I want to know what is the best solution for this problem :

I got in my app 1 abstract SideMenu used by two ion-view : map.html and message.html

But I want an header totally different for each page.

For map : 1 OpenLeftMenuButton + 1 search box

For message : 1 BackButton + 1 OpenLeftMenuButton + 1 Info Button to the right

I am a little confused by all Ionic/HTML structures :  
- Ion header bar  
- div class header  
- etc…

In the doc, to add a SearchBox in the header, they use a Div with header as class

But for a “map page” (using Google Maps), it’s not working due to scroll(false) attribute…

Here the code without the attribute :

```auto
     <ion-view hide-nav-bar="true">
         <div class="bar bar-header item-input-inset">
             <label class="item-input-wrapper">
                 <i class="icon ion-ios7-search placeholder-icon"></i>
                 <input type="search" placeholder="Search">
             </label>
         </div>
         <ion-content id="map" data-tap-disabled="true"></ion-content>
     </ion-view>

```

With this code, the search box appears in the map header but there is a JavaScript error :  
“TypeError: Cannot read property ‘scrollWidth’ of null”

So my questions are :

- How to add a map header without error?
- What is the best way to customize each page header (button, inputs, title, etc) but keep 1 identical sidemenu?
- Is there a documentation explaining each Ionic Structure and limits ? (for example, is it possible to use ion header bar inside ion view, what attributes can cause errors, etc)

Thanks in advance 🙂

---

<div class="post-metadata">

**Author:** ![Melina](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/melina/32/13309_2.png) [@Melina](https://forum.ionicframework.com/u/Melina)\
**Post date:** [August 21, 2014, 12:25pm UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/2 "2014-08-21T12:25:46Z")

</div>

No one to help me with this?

Or at least maybe give me another forum subject speaking of something similar? 😊

I read the whole ionic doc, however difference between css and js ionic component use cases can be fuzzy 😕

In code examples, we often see the two methods and it’s often working whichever way

Am I the only one wanting dynamic app header (button, form, text, …) depending on the view but the same abstract layout (in this case the same side-menu)? sort of sub-layout? 😃

Thanks in advance 😉

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 21, 2014, 6:30pm UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/3 "2014-08-21T18:30:19Z")

</div>

For this, your best just using two different `ion-header-bar`'s in the different views.

---

<div class="post-metadata">

**Author:** ![Melina](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/melina/32/13309_2.png) [@Melina](https://forum.ionicframework.com/u/Melina)\
**Post date:** [August 22, 2014, 12:04pm UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/4 "2014-08-22T12:04:39Z")

</div>

Thank you for trying to help me,

concerning differences between js/css components, I found a post giving advices yesterday :

> **[Beginner Question: When is it appropriate to use a JS component instead of a CSS...](http://forum.ionicframework.com/t/beginner-question-when-is-it-appropriate-to-use-a-js-component-instead-of-a-css-element/8549)**
>
> Hello there, I'm a brand new user of Ionic, and I like the analogy that compares it to Twitter bootstrap, however, after having read the docs these past days, I'm a bit confused about the usage between CSS or JavaScript components. For example,...

Maybe an “official” Ionic blog article about this could be great for beginners 🙂

Concerning **ion-header-bar** , I remember having dificulties to make it work with my header search input for google maps, but it’s maybe a special case.

I can’t test it now, but is the following syntax correct ?

```
<ion-view>
      <ion-header-bar align-title="left" class="bar-positive">
             <label class="item-input-wrapper">
                 <i class="icon ion-ios7-search placeholder-icon"></i>
                 <input type="search" placeholder="Search">
             </label>
      </ion-header-bar>
      <ion-content id="map" data-tap-disabled="true"></ion-content>
</ion-view>

```

If not, how to make this working with ion-header-bar?  
Did I need to use special ion-view attribute (hide-nav, etc …) ?

Thanks

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [August 22, 2014, 4:33pm UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/5 "2014-08-22T16:33:34Z")

</div>

This is based on our google map example on our codepen page.  
It should cover what you need

> **[Google Maps Example: 1.0.0-beta.11](https://codepen.io/mhartington/pen/Igabt)**
>
> Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Google Maps Example: 1.0.0-beta.11\](http://codepen.io/ionic/pen/uzngt/)....

---

<div class="post-metadata">

**Author:** ![Melina](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/melina/32/13309_2.png) [@Melina](https://forum.ionicframework.com/u/Melina)\
**Post date:** [August 23, 2014, 9:50am UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/6 "2014-08-23T09:50:29Z")

</div>

Thank you for this working example. 😃

For those using **ion-view** in separate file and an **abstract side-menu** (with a predefined ion-nav-bar)

Don’t forget the **hide-nav-bar** tag, here same code with ion-view (for my particular case) :

```
<ion-view hide-nav-bar="true">
    <ion-header-bar class="bar-dark item-input-inset" >
        <label class="item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="search" placeholder="Search">
        </label>
    </ion-header-bar>
    <ion-content>
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
        <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
</ion-view>

```

Without the hide attribute, it’s in fact the **bar from the sidemenu** which is used.

---

<div class="post-metadata">

**Author:** ![Chimerla](https://avatars.discourse-cdn.com/v4/letter/c/f6c823/32.png) [@Chimerla](https://forum.ionicframework.com/u/Chimerla)\
**Post date:** [January 3, 2017, 9:57pm UTC](https://forum.ionicframework.com/t/1-sidemenu-multiple-ion-view-headers/8050/7 "2017-01-03T21:57:14Z")

</div>

How do I keep sub header just below the header title ?

I mean does ionic framework support this… ?