I want to start off with a thank you. You always form your questions well and provide enough info to make an attempt to solve it!
First, the longer explanation - skip past for the short answer:
So, I’m not sure how much you know about z-index. It can actually get a bit complicated. First, there is the general stacking order of the browser. Without any CSS positioning, things lower in the the DOM tree are stacked on top of things higher in the DOM tree (basically - but not always). But, as soon as you add any position (something other than ‘static’) that element and any descendants will be displayed in front of any non-positioned elements - even without a z-index change.
Groups of elements with a common parent will move together through the DOM in what is called a stacking context. So for example, if you have a tree with two
div elements next to each other. Everything inside the second
div will have a higher stacking context than anything in the first
div. If both divs have a position set and a z-index set, then nothing in the first div can layer on top of an item in the second div, no matter the z-index! There are some other CSS properties besides position that can also change the stacking order and thus make changing the stack using z-index tricky. Basically, you have to consider everything that has come previously on the page and is outside of the normal stacking order and whether a parent element is controlling the stacking context.
The short (not really) answer:
If you look at your page, the header has a position of fixed. In order to put it on top of the content it also has a z-index of 1. Without any other elements on the page having a different stacking context, this would be fine and place it over all of the other content.
Next, if you look at the slide controls, they have a z-index of 1. Since they have the same parent for stacking order (the main HTML tag) that means that the DOM order takes over and items later in the DOM will be stacked on items earlier in the DOM. So, your controls are over the navigation.
The slide caption is a little tougher. It doesn’t have a z-index, but it is positioned absolute. This takes it outside of the normal stacking context. Since the parent element isn’t positioned it uses the HTML tag again. Without a z-index, it is layered later than items earlier in the DOM that are positioned - like the nav.
Finally - to the answer - just increase the z-index of your header containing the nav to a higher number. Since they all have the same stacking context, they will compete against each other. Right now they all essentially have an equal z-index, so the order in the tree matters.