Site()-helper, highlighted navigation

Kirby 3 Solved ✅
1

Hi!

As you know, I’m new to Kirby, HTML, CSS and PHP. :innocent: But I’m doing my homework. But sometimes I need your help…

I want to achieve, that the selected page is highlighted (mockup attached).

KirbyFrage
KirbyFrage.png800×82 4.07 KB

My header:

header-snippet

`

	<title><?= $site->title() ?> | <?= $page->title() ?></title>

	<?= css('assets/css/styles.css') ?>
</head>

<body>
	<header class="header-nav">

		<a href="<?= $site->url() ?>"><img src="assets/img/logo.png" alt="Das Logo dieser Webseite."></a>

		<nav>
			<?php foreach ($site->children()->listed() as $subpage): ?>
				<a href="<?= $subpage->url() ?>">
					<?= $subpage->title() ?>
				</a>
			<?php endforeach ?>
		</nav>
	</header>

`

This is my CSS-Snippet…

CSS-Snippet 
.active {
background-color: #A62C21;

}

…when I include that to my header-snipped in the a-brackets, I’ll get all my navigation-URLs in red. But I just want to set that active one to red. How can I do that?

Thank you in advance.

2

You can use the e() helper to test if the page is open, and if its true, add a class:

<a <?php e($subpage->isOpen(), ' class="active"') ?> href="<?= $subpage->url() ?>">
	<?= $subpage->title() ?>
</a>
1 Like
3

Thank you, that’s working fine. :slight_smile: Got a problem with my CSS (positioning the red box), but I’ll figure it out…