Menu navigation: disginguish 2 items and define them differently

Kirby 3 Solved ✅
1

I have a classic off-canvas side menu, and I want to distinguish the two last items (contact and privacy) from the rest of the menu and make them be fixed at the bottom. The result should look like that:

off-screen

The HTML is just the normal one:

<nav class="off-canvas-menu">
    <ul>
  	<li><a<?php e($page->isOpen(), ' class="home-link"') ?> href="<?= $site->url() ?>">Home</a></li>
    <?php foreach($items as $item): ?>
    <li><a<?php e($item->isOpen(), ' class="active"') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a></li>
    <?php endforeach ?>
  </ul>
  </nav>

Something like

nav li:last-child,
nav li:nth-last-child(2) {
position: absolute;
bottom: 0;
}

should do the job, but I fail to force the two links into an inline block and thus push the two together down to the bottom.
Other thought: Is there a possibiltiy to wrap the two links via PHP?

Right now the CSS, as part of a CSS-only menu, is:

.off-canvas-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100% !important;
  background: #111;
  font-size: 16px;
  transform: translateX(-100%);
  -webkit-backface-visibility: hidden;
  transition: 0.5s;
  z-index: 2;
}

.off-canvas-menu input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
	display: block;
  cursor: pointer;
}

.off-canvas-menu ul {
  margin: 0;
  padding: 0;
}

.off-canvas-menu > ul {
  margin-top: 100px;
}

.off-canvas-menu a {
  display: block;
  padding: 5px 20px;
  color:  #adb167;
  text-decoration: none;
}

.home-link {
  background-color: none;
}

.off-canvas-menu .active > a {
    background: none !important; 
}

.active {
  background-color: #09212b;
}

.off-canvas-menu li {
  position: relative;
  float: left;
  width: 100%;
  list-style: none;
  color: #fff;
  transition: 0.5s;
}
2

I think it would make sense to create a separate list for these two items.

3

Hey,

maybe you can try something like this:

  1. get the slug as class for each list-item
<nav class="off-canvas-menu">
    <ul>
  	<li class="<?= $item->slug() ?>">
        <a<?php e($page->isOpen(), ' class="home-link"') ?> href="<?= $site->url() ?>">Home</a>
    </li>
    <?php foreach($items as $item): ?>
    <li class="<?= $item->slug() ?>">
      <a<?php e($item->isOpen(), ' class="active"') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
    </li>
    <?php endforeach ?>
  </ul>
  </nav>
  1. use flexbox for the list
ul {
  display: flex;
  flex-direction: column;
  height: 100%;
}
ul li.about {
  margin-top: auto;
}

here is a codepen example

4

Sorry for the tardy reply. The CSS was the solution. I used

nav li:nth-last-child(2)

for it instead of the PHP-code (which gave me slug of the actual page and not the links), and achieved the same. Thank you very much.