The problem is due to ‘z-index’ property in CSS. your top bar menu z-index should be greater than the text.

for example:

.topBar {
    position: fixed;
    z-index: 999
}


.text {
    position: relative;
    z-index: 998;
}

Why do .logotext need a z-index of 998?

Anyway, All you need is to add a higher z-index value to your header.

So I’m trying to make a top menu bar in a fixed position.

The problem is while everything looks alright when scrolling, all images, divs and all that goes behind the div when scrolling, the text, on the other hand, is still in front of the menu.

I’ve made sure that the text is loaded in before the div in code but yet it goes in front like this:
https://i.gyazo.com/4ac5dfd1d316c47a80a6991fc286e0b4.gif

The code is quite messy since I’m quite new to all this but I’ll try to show the important parts of the code.

HTML:

<div class="logotext">
<h1>Rustic Café</h1>  
</div>

<div class="topwood"></div>

CSS:

    .logotext
{
   color: rgb(255, 255, 255);
   position: absolute;
   top: 50%;
   left: 41%;
   width: 100vw;
   height: auto;
   z-index: 998;
   font-size: 83px;
   font-family: "Satisfy", cursive;
   text-shadow: 10px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.topwood
{
   width: 100%;
   height: 4.2vw;
   top: 0vw;
   left: 0vw;
   position: fixed;
   background-color: rgb(236, 236, 236);
   box-shadow: 0 0 3px;
}