title: Ionic side menu, how to place the link at the bottom of the side menu
body: <p>I have a side menu in an ionic app, I need to have links in it, and the link for the logout should be at the bottom of the side menu, not sure how to achieve this, since the ion-list height is depended on the amount of links there are, and can't play with position of the link itself to place it at the bottom of the side menu.</p>
  
  <p>This is the situation now:</p>
  
  <p><a href="https://i.stack.imgur.com/z3Xe0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z3Xe0.png" alt="enter image description here"></a></p>
  
  <p>And this is the html:</p>
  
  <pre><code>&lt;ion-side-menu side="left" class="side-menu" scroll="false"&gt;
        &lt;ion-content&gt;
          &lt;ion-list&gt;
            &lt;ion-item ui-sref=""&gt;
              Min Profil
            &lt;/ion-item&gt;
            &lt;ion-item ui-sref="main.logout" class="logout"&gt;
              Logg out
            &lt;/ion-item&gt;
          &lt;/ion-list&gt;
        &lt;/ion-content&gt;
      &lt;/ion-side-menu&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I had to overwrite ionic default tags and classes, so this is what worked for me in the end.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;ion-side-menu side="left" class="side-menu" scroll="false"&gt;
        &lt;ul class="menu"&gt;
          &lt;div class="side-menu-header"&gt;
          &lt;/div&gt;
          &lt;div class="menu-main"&gt;
            &lt;li&gt;
              &lt;a ui-sref=""&gt;Min Profil&lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
          &lt;div class="menu-last"&gt;
            &lt;li&gt;
              &lt;a ui-sref="main.logout"&gt;Logg out&lt;/a&gt;
            &lt;/li&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/ion-side-menu&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  
    ,a {
      background-color: $dark-background-color;
      color:$light;
      text-decoration: none;
      font-size: 1rem;
      }
  
      .side-menu-header {
        height: 60px;
      }
  
      .menu-main {
        position: absolute;
        top: 60px;
        margin: 15px;
  
        li {
          margin: 5px 0 5px 0;
        }
      }
  
      .menu-last {
        margin: 15px;
      }
  }
  </code></pre>