Fixed category navigation showing scrolled content behind

Hi everyone, I've been fidgeting with a bit of CSS for hours now trying to fix something.I'm setting up a page with a fixed category navigation for a products page, but when you scroll up you can see the content "above" the navigation, as you can see below:

From researching on how to set up a fixed navigation bar, and modifying it slightly so that it aligns to my header logo this is the code:

.category-nav .category-nav-links { padding-top:23px !important; padding-bottom:41px !important; 
display: block;
background-color: #E6D9E2;
position:fixed; 
width: 100%;
z-index: 99999;
}

I thought I could fill in the space above the navigation bar by adjusting the margin or border but nothing seems to work... or if I could somehow move the position of the navigation, but how would I do that if I already have position set as fixed?

Thanks if anyone could help me out here...!

@juliac you should share url to community can check.