Menú hamburguesa – Versión móvil

Buenas a todos, tengo un pequeño problema, pude montar el menú hamburguesa hecho solo con html y css. Es funcional pero el problema es que al momento de desplegarse el menú se ve por detras de la imagen de portada. Les comparto el código y la pag así la vean por si me pueden ayudar.

La idea es que el menú el desplegarse se vea por delante y se pueda interactuar, si son detallistas podrán ver que el menú se despliega por que se ve una pequeña franja morada entre el header y la portada.

Gracias de antemano.

<header class="header">
        <nav class="navbar">
            <h1 class="logo">Logo</h1>
            
            <label class="labe_hamburguesa" for="menu_hamburguesa">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="35"
                    height="35"
                    fill="rgb(105, 0, 255)"
                    class="list_icon"
                    viewBox="0 0 16 16"
                >
                    <path
                        fill-rule="evenodd"
                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
                    />
                </svg>
            </label>

            <input class="menu_hamburguesa" type="checkbox" name="" id="menu_hamburguesa">

            <ul class="ul_links">
                <li class="li_links">
                    <a href="#" class="link">Inicio</a>
                </li>
                <li class="li_links">
                    <a href="#" class="link">Sobre mi</a>
                </li>
                <li class="li_links">
                    <a href="#" class="link">Productos</a>
                </li>
            </ul>
        </nav>
</header>
    
<style>
    
:root {
    --color_primario: #8527c3fd;
    --color_primario_suave: #8527c383;
    --color_blanco: #fff;
    --altura_header: 80px;
    --padding_left_right: 2rem;
    --ancho_maximo: 1200px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: yanone kaffeesatz;
}

a{
    text-decoration: none;
}

ol, ul{
    list-style: none;
}

.header {
    height: var(--altura_header);
    /*background-color: #6900FF;*/
}
.navbar {
    height: 100%;
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /*position: relative;*/
    padding: 0 var(--padding_left_right);
}

.menu_hamburguesa{
    display: none;
}

.menu_hamburguesa:checked + .ul_links{
    height: 300px;
    width: 100%;
    padding-right: 30px;
    z-index: -1;
}

.logo {
    color: white;
}

.list_icon {
    color: var(--color_blanco);
    cursor: pointer;
}

.ul_links {
    width: 100%;
    background-color: var(--color_primario_suave);/* cambia el color del fondo de la nav al bajarse*/
    position: absolute; /* los ul links se posicionarán de manera absoluta en base a mi navbar */
    top: var(--altura_header);
    left: 0;
    height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: calc(100vh - var(--altura_header));*/
    align-items: center;
    gap: 3rem;

    transition: all .3s;
   
}

.link {
    font-size: 1.7rem;
    color: var(--color_blanco);
    font-weight: bold;
    
}

@media (min-width: 768px){
    .labe_hamburguesa {
        display: none;
    }
    .ul_links{
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        gap: 2rem;
    }
    .link{
        font-size: 1.2rem;
        transition: all .3s;
        padding: .2rem .7rem;
    }
    .link:hover{
        background-color: #6900FF;
    }
    .logo{
        display: none;
    }
}
    
</style>

La página con la que necesito ayuda: [accede para ver el enlace]