Jump to main content

Skip navigation and jump straight to your main content

2021-08-18 Accessibility
This site has a "skip to content" function, have you noticed? After loading a page the first tab press will focus on the anchor link and make it visible on the page. Follow this guide to make your own navigation skipper.
Place this row at the top right after your <body>
<a href="#content" id="jumper">Jump to main content</a>
Add the the ID where you want the anchor link to jump down to
<div id="content">
<!-- Your page content goes here -->
</div>
Add this to your css file
#jumper {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#jumper:focus {
    position: initial;
    width: initial;
    height: initial;
    display: block;
    text-align: center;
    padding: 1em;
    color: #fff;
    background: #333;
}

You might also want to read the following

2021-08-11 Piranha

Track users with Google Analytics on your Piranha site

Keep a track on your visitors and which pages are popular with Google Analytics. This post gives you a great example on how you can implement a dynamic way to add end edit your tracking codes

2021-08-10 Piranha

Manage your footer with a region

Footers are a basic component of almost all websites. Therefor we'll make it as easy as possible for us to manage ours by turning it into a region area on our site model. This guide uses Bootstrap 5

2021-08-05 Piranha

Accordion block with Bootstrap 5

Sometimes you have way to much text to fit on a page. A simple way to structure and group important content is by using an accordion. This post will give you an idea on how you can implement your own accordion on a Piranha site

2021-08-03 Piranha

Piranha block for social media links

Most businesses and even personal sites have the need to share their social media links. Here's an example on how you can turn your social media links into a reusable block

2021-08-03 Piranha

Display breadcrumbs with Bootstrap 5 on a Piranha site

Here's a quick and easy way to implement breadcrumbs on your Piranha site. The solution is based on Bootstrap 5 breadcrumb component