Increase height menu size

ionic-v1
1

Hi guys, I have a basic side menu and I would like to increase the height of the header div where is my test Location, but when I apply my css, nothing happens. Please how could I do ?

<ion-side-menus>

  <ion-pane ion-side-menu-content>

    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

  </ion-pane>

  <ion-side-menu side="left">

  <div class="bar-height">
        <header class="bar bar-header bar-stable">
        <h1 class="title">Locations</h1>
      </header>
  </div>


    <ion-content class="has-header">

      <ion-list>

        <ion-item nav-clear menu-close ng-click="goTo(locationKey)" ng-repeat="(locationKey,location) in locations track by location.name">
          {{location.name}}
        </ion-item>

      </ion-list>

    </ion-content>

  </ion-side-menu>

</ion-side-menus>

and my css is

.bar-height {
    height: 50%;
}
2

Firstly in your CLI I’d setup sass

ionic setup sass

Then in your ionic.app.scss

add the line

$bar-height:  44px !default;

HTH :smile:

44px being the default so changing that, should in turn alter the bar height

3

Whaou, it’s work but all nav-bar in the app got this new property. How could I change only the menu header without changing everything.
Thanks in advance

4

Nobody knows how could I do ?