I'm trying to make a top menu in ionic but this menu is getting on top of the content, I'd like to know how to leave the content below the menu
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport {
width: 100vw;
min-zoom: 100%;
zoom: 100%;
}
@viewport {
width: 100vw;
min-zoom: 100% zoom: 100%;
}
@-ms-viewport {
user-zoom: fixed;
min-zoom: 100%;
}
@viewport {
user-zoom: fixed;
min-zoom: 100%;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.min.js"></script><body><ion-view><divclass="bar bar-header has-tabs-top bar-positive">
<div class="h1 title">TESTE</div>
</div>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
<ion-content class="has-header">
<div class="list card">
<div class="item item-icon-left">
<i class="icon ion-ios-bookmarks padding-top padding-bottom"></i>
<strong>CURSO:</strong>{{curso}}
</div>
<div class="item item-icon-left">
<i class="icon ion-person padding-top padding-bottom"></i>
<strong>NOME:</strong>{{nomeAluno}}
</div>
<div class="item item-icon-left">
<i class="icon ion-bookmark padding-top padding-bottom"></i>
<strong>RA:</strong>{{ra}}
</div>
</div>
</ion-content>
</ion-view>
</body>
</html>If someone posts along with the example code of the views working for each menu item ... I thank