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-14 Tropico 6

Boost your economy early game

Starting a new game can sometimes be difficult, at least when you can't really get your money flowing. I'd like to share a few tips and tricks that always seem to work for me no matter which era I'm currently in

2021-08-14 Tropico 6

Traffic management

Do you ever experience traffic congestion? The chances are high that you have or will once your city starts expanding. But how should we combat this? This guide will help you with just that.

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