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-12 Piranha

Edit block templates inside the manager with Scriban

Want to edit block templates without rebuilding your project? Let Scriban help you with that. Scriban parses your custom Html and objects and then gives you HTML ready to be used anywhere.

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-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