Nav-bar covers and hides everything at the top

ionic-v1
1

Helllo, I just ran into this problem where header or nav-bar hides everything underneath it where it should push everything down.

Here is a photo of how it looks like

As you can see there is a tekstas0 list item hidden underneath nav-bar.

Here is my code:

<ion-view hide-back-button="false" has-navbar="true" title="Menu">
    <ion-side-menus>
        <ion-side-menu-content>
            Content!
            <button ng-click="toggleLeft()">
                Toggle Left Side Menu
            </button>
        </ion-side-menu-content>
        <ion-side-menu side="left">
            <ul class="list">
                <li class="item"> tekstas</li>
                <li class="item"> tekstas1</li>
                <li class="item"> tekstas2</li>
            </ul>
        </ion-side-menu>
    </ion-side-menus>
</ion-view>

I’am sorry if my question sounds stupid, but I’am pretty new into all web development and especially into ionic.

2

Generally speaking, you shouldn’t have your side menu inside a view. It’s possible to do this and maybe necessary depending on your routing.

A more traditional arrangement is like this:

<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">

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

    <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>

Notice the ion-nav-view name="menuContent". This is where your router would put the content for each page.

See this sample :

3

Okay, thank you very much for response I believe I fixed everything and my code now kinda looks like yours, but again there is some strange things going on here.

When I switch from another state to this state “app.page1”, at first I can’t see nav-bar propertly and it looks like this

But after I refresh it everything starts to look nice and neat as it should like this

Is something with my browser wrong (I use ionic serve to test) or my code is somehow bad again.