The responsive menu messes everything up - html

Question

I'm eating my head for days with this problem. I proposed to make a menu, two different menu lists, the language one and the section one. In normal size, I like how it looks, the problem comes when I make it responsive to look at how it looks and I don't know how to find a solution.
I leave you the part of css and html.
<header class="l-header">
<nav class="nav bd-grid">
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li>
<img src="img/espana (1).png" alt="">
</li>
<li>
<img src="img/pais-vasco (1).png" alt="">
</li>
<li>
<img src="img/estados-unidos-de-america (1).png" alt="">
</li>
<li>
<img src="img/francia (1).png" alt="">
</li>
<li>
<img src="img/alemania.png" alt="">
</li>
</ul>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">About me</li>
<li class="nav__item">Skills</li>
<li class="nav__item">Projects</li>
<li class="nav__item">Contact</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<em class='bx bx-menu'></em>
</div>
</nav>
</header>
*=====NAV=====*/ .nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-semi);
}
#media screen and (max-width: 768px) {
.nav__menu {
position: fixed;
top: var(--header-height);
right: 500%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
.nav__menu1 {
position: fixed;
top: var(--header-height);
right: -100%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
}
.nav__item {
margin-bottom: var(--mb-4);
}
.nav__link {
position: relative;
color: #fff;
}
.nav__link:hover {
position: relative;
}
.nav__link:hover::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
.nav__logo {
color: var(--second-color);
}
.nav__toggle {
color: var(--second-color);
font-size: 1.5rem;
cursor: pointer;
}
/*Active menu*/
.active::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
/*=== Show menu ===*/
.show {
right: 0;
}
can you help me.? Thanks a lot
After the code:

Answer 1

Here's my suggestion.
Move the language content to the bottom of the nav when responsive and change it to a side-by-side view.
<header class="l-header">
<nav class="nav bd-grid">
<div class="nav__menu nav__menu--lang" id="nav-menu">
<ul class="nav__list nav__list--lang">
<li>
<img src="img/espana (1).png" alt="">
</li>
<li>
<img src="img/pais-vasco (1).png" alt="">
</li>
<li>
<img src="img/estados-unidos-de-america (1).png" alt="">
</li>
<li>
<img src="img/francia (1).png" alt="">
</li>
<li>
<img src="img/alemania.png" alt="">
</li>
</ul>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">About me</li>
<li class="nav__item">Skills</li>
<li class="nav__item">Projects</li>
<li class="nav__item">Contact</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<em class='bx bx-menu'></em>
</div>
</nav>
</header>
*=====NAV=====*/ .nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-semi);
}
#media screen and (max-width: 768px) {
.l-header {
height: 100vh;
}
.nav {
position: relative;
height: 100%;
}
.nav__menu {
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
.nav__menu--lang {
position: absolute;
bottom: 0;
}
.nav__list--lang {
display: flex;
}
}
.nav__item {
margin-bottom: var(--mb-4
}
.nav__link {
position: relative;
color: #fff;
}
.nav__link:hover {
position: relative;
}
.nav__link:hover::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
.nav__logo {
color: var(--second-color);
}
.nav__toggle {
color: var(--second-color);
font-size: 1.5rem;
cursor: pointer;
}
/*Active menu*/
.active::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
/*=== Show menu ===*/
.show {
right: 0;
}