HTML header is visible through navigation

Question

I have a webpage with a horizontal navigation at the top and a vertical navigation on the left. The left nav has links, that point to headers on the same page. The links worked, but the headers where on top of the page and blocked by the sticky nav. So I added this code:

<h2><span id="installation"></span>Installation</h2>

h2 { 
    position:relative;
}
h2 span { 
    position:absolute;
    top:-60px;
}

The links work now and the headers move right under the top nav, when the links are clicked.

But if I scroll the page now and the headers move behind the sticky top nav, I can see the header text through the text in the nav.

picture of the problem

The nav uses this CSS:

.horizontal_menu {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-bottom: 5px;
}
#ul_horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.li {
    float: left;
}
.li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #FEC107;
}

Answer 1

Just add a higher z-index like z-index: 2; to the .horizontal_menu class.

Bonus: If you want to make the vertical navigation to go under the horizontal navigation, make the z-index: 3; in this way the header navigation is always on top of everything.