Anchor-link in global navigation

Kirby 2 Solved ✅
1

I have a big contact form in the bottom of all pages (an extended footer). I would like to have a ‘Contact Us’ anchor link in the navigation that goes to the contact form on the current page: site.com/#contact, site.com/category/page2/#contact etc.

I have tried making a template that just redirects to #/contact, but this doesn’t work as the page made gets its own URL so the link ends up being site.com/contact/#contact

What’s the best/easiest way to do this?

Thanks

2

You want to jump to an anchor on the page right? You can use this:


    <a href="#your-contact-form">Contact form</a>

Make sure that, when you use this method, the contact form has a `id` attribute of `your-contact-form` (or whatever you want to call it :) ):


<form id="your-contact-form"></form>
3

Thanks, Gerard, but it’s actually not the html I’m struggling with, it’s how to handle this in Kirby’s page structure. When I add a new level 1 page in Panel, it becomes a part of the top navigation. How can I add a link to the top navigation that is an anchor-link.

4

You can simply add it as an extra list item manually after or before the foreach that loops through the top level pages.

<ul class="navigation" role="navigation">
<?php foreach($pages->visible() as $p): ?>
  <li><a href="<?= $p->url() ?>"><?= $p->title()->html() ?></a><li>
<?php endforeach ?>
  <li><a href="#your-contact-form">Contact us</a></li>
</ul>
3 Likes
5

Oh, yes, that was simple. Thanks a lot, texnixe!

6

Even if this is some years old, I would like to add an additional question:

Is there an option to add this in a dynamic way by creating a page with an anchor link somehow? I would like to make the anchor links editable through the backend. Thanks a lot!

7

Hi @Chimara2501,

Im no expert, and im just learning PHP, but ive been trying to figure out the same thing myself. Ive found a way to do it although im not sure if its the best but it works…

<?php foreach($pages->listed() as $part): ?>
    <li><a href="#<?= html($part->title()->lower()) ?>"><?= html($part->title()) ?></a></li>
<?php endforeach ?>

Wrap this in a ul, nav, whatever. If someone knows a better way, please let us know. Thanks