Search code examples
htmlcsshtml-lists

List items displaying over menu on website


I can't figure out why the list items on my website are displaying on top of my logo and the menu. Have a look yourself on the website or this image: a screenshot of the https://papojari.codeberg.page/art/ website Some time ago I had the same issue with headings. The headings were in the post-title class because of a template I use. When I removed that class, the problem was gone. My list items don't have a class like that though and I can't find any references to that class and what it does. You can obviously have a look at the CSS on the website but additionally the source code is also here: https://codeberg.org/papojari/pages.

Please tell me how to stop the list items from displaying on top of my logo and the menu.


Solution

  • @papojari, I have checked your site and I think that it's the problem of the z-index between and header and main section.

    Here is the adding style for fixing it.

    header {
        position: relative;
        z-index: 99;
    }
    
    main {
        position: relative;
        z-index: 0;
    }
    

    I hope it is helpful for you.