Tricky menu via Flex?

Question

css

Hello!
Link to the code
I'm doing mobile-first. The mobile menu should be dropdown and not affect the flow (well, there seems to be no problem with this).
The problem is that I really don't like how I fit two independent lists (menu--1 and menu--2) to each other through the absolute. Of course, ideally it would be to wrap the entire menu in one block, set a posa for it and show it when clicking on the "hamburger", but this is probably impossible to implement, because my task is to change the visual order of the lists and the logo (via order) depending from permission, i.e. the logo must be in the ONE container with these listings.
Produce another menu just for mobile... Produce a logo?! Well, somehow it is in this situation that you do not want extra elements. Seems like I'm missing something.
Question to the connoisseurs: how would you get out of this situation as beautifully as possible? Thank you! :)

Answer 1

You're too clever with the absolute.
https://jsfiddle.net/bnjoyboq/

/***MOBILE***/
.header__nav {
  flex-direction: column;
}

In general, you did some kind of garbage ...
https://jsfiddle.net/bnjoyboq/1/
For mobile - column, for tablet - row.
In general, a different approach is needed here.
In this option, menu items of different length will knock down the logo.
https://jsfiddle.net/bnjoyboq/2/
https://jsfiddle.net/gxjy91du/