I've been trying to make my menu fixed at the top of my website, but it keeps overlapping into my header image and doesn't look right. I've experimented with different solutions, but nothing seems to work.
Here's the CSS code I used that caused the overlap issue. I attempted to adjust the menu position so it wouldn't overlap the image, but then it looked strange with the text too close to the top of the screen, so I reverted back.
@media only screen and (min-width: 768px) {
.site-top {
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
}
I have included some images to illustrate the problem: This is how it looks without the additional CSS: without the added css
And this is the result with the new code: with the added css
I appreciate any assistance you can offer.
Edit: I am using a Wordpress.com site where I can only apply custom CSS and cannot access the full code. Unfortunately, I am unable to display the header and menu code. You can visit my website at mathbythemountain.com