Why can you take nav links out of the navbar container, and re-flow in HTML navbar/header tag? Will that cause layout/performance issues?

Suppose I have a Navbar wrapped by header tag with links on it, I structured it this way

    <header id="header" class="header active">

    <nav class="nav">
        <!-- NAV LOGO -->
        <div class="nav__logo">
            <a href="">
                <img src="./img/logo.svg" alt="" class="nav__img">
            </a>
        </div>

        <!-- NAVLINKS -->
        <ul class="nav__list">
            <li class="nav__item">
                <a href="" class="nav__link">Home</a>
            </li>

            <li class="nav__item">
                <a href="" class="nav__link">About</a>
            </li>

            <li class="nav__item">
                <a href="" class="nav__link">Courses</a>
            </li>
            
            <li class="nav__item">
                <a href="" class="nav__link">Contact</a>
            </li>

        </ul>

        <!-- ACTIONS -->
        <div class="nav__actions">

            <button>
                <i class='bx bx-search'></i>
            </button>

            <button>
                <i class='bx bx-cart' ></i>                
            </button>

            <button>
                <i class='bx bx-menu' ></i>
            </button>
        </div>

    </nav>
</header>

And on my CSS,

header{
    background: white;
    padding: 1.25rem;
    position: relative;
    z-index: 10;

}

.header .active{
    position: fixed;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.3);
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo{
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.nav__list{
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 0 1.25rem;
    gap: 2.25rem;
}

.nav__link{

}

.nav__actions{
    display: flex;
    gap: 1.25rem;
    padding: 0px 1rem;
}

My questions are quite simple, yet I would like to confirm them somehow.

If I set my media queries and change my CSS nav__list - if it hits (max-width: 420px) to become a side menu by taking it out of the flow by .nav__list: position:fixed, will that cause problems and can be seen in dev tools? Like overlapping, layouts/performance, Is this the right way? Just take out certain elements even if they are under one root layout (header>nav - nav_list)?

Or do I need to create a new dedicated (menu list) for the sidebar menu?

P.S: I come from Android background, XML layouting is different, they are structured in a way by not taking certain elements out of the tag/flow.