Konzern Theme: Building a Static Navigation

Adding a static navigation to the konzern theme isn’t very difficult:

1. Install the “staticnavigation.rwsnippet” file by double-clicking it
2. Add the snippet “Static Navigation” to the JavaScript field in the Page Inspector
3. Change the display names (e.g. ‘Home’) and the target URL (e.g. ‘/index.html’) so it matches your needs

It’s clear that the page you want to link to have to exist. So, before using the static navigation you need to have created these pages.

The hardest part of the static navigation probably is to find out the correct URL to link to. An easy way to find out is by uploading the pages, load them in the browser and copy the URL from the address bar.

In general the static navigation items are displayed as simple text links without too much styling. If you know some CSS, you can further style them with the following CSS Selectors:

#staticNav
This is the selector for the main staticNav Div, where all items are placed. You may offset it with values for “top” and “right”. If you want you can also make further adjustments.

#staticNav ul
This is the unordered list container where all links are in

#staticNav ul li
The individual list items, containing the links

#staticNav a
The links in the static navigation

#staticNav a:hover
The links when hovered with the mouse

The following code is the default one, which is applied, so you know what rules are set:

#staticNav {
position: absolute;
width: auto;
height: auto;
top: 28px;
right: 0;
padding: 10px;
z-index: 5000;
}

#staticNav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
text-align: right;
}

#staticNav ul li {
font-size: 1em;
display: inline;
list-style: none;
padding: 0 6px;
}

#staticNav a {
display: inline;
text-decoration: none;
height: 1.2em;
padding: 5px 0;
}

#staticNav a:hover {
text-decoration: underline;
}

If you don’t know any CSS: learn it! It is not very hard and will give you many possibilities.