Navigation mobile sobre o content page

Question

I created a mobile navigation, where it expands by clicking on the logo of my site. But it is expanded on the content of my page. I would like it to expand over the content, so that it covers the entire content of the page. I’ve tried every way, its width is already 100%.

<div class="nav-mobile">
    <div class="nav-mobile__container">
        <ul class="nav-mobile__links">
            {% for link in linklists[linklist].links %}
            <li class="navigation__entrance-animation  navigation__entrance-animation--active">
                <a href="{{ link.url }}">
                    {{ link.title | escape }}
                </a>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

.nav-mobile {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    position: absolute;
    left: 0;
    background-color: #fff;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    transition: opacity 0.25s ease-out;
    z-index: 5;
    display: none;
}

.nav-mobile__container {
    width: 100%;
    min-height: 100%;
    padding-bottom: 60px;
}


.nav-mobile__links {
    list-style: none;
    padding-left: 0;
    margin: 0 0 20px;
}

.navigation__entrance-animation.navigation__entrance-animation--active,
.navigation-open--editor .navigation__entrance-animation {
    max-height: 1001px;
    opacity: 1;
    transform: translateY(0);
}

.navigation__entrance-animation {
    transition: max-height 0.01s, transform 0.25s ease-out, opacity 0.25s ease-out;
    font-size: 4.5rem;
}

.navigation__entrance-animation a { 
    text-decoration: none;
    color: var(--color_nav_mobile);
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    font-family: 'CarosSoftRegular';
}