+1 vote

What's the best way to do it if the menu is converted to hamburger on a cell phone?

Initially I wrapped the whole hat in ul, then I decided to break everything into col (the first two items, logo, the last items ?and where the burger?) , but it comes out crooked :D

Thank you all for responding!

3 Answers

0 votes
Best answer
Bad option. Duplicate the menu.
Even worse. Using js to move the block with the logo through the DOM tree.
Normal. Make the logo relatively positioned. Insert it in the center, make it static in the mobile version, or just change the position.
+1 vote
Here's one that's right up your alley
+2 votes
You can make a grid for the header with 3 columns (auto [logo width] auto), where the navigation will take from the first to the last column of the first line. The logo will occupy the second column. The navigation scheme should be repeated to create a negative space under the logo, where it should be.

Most likely, you'll need to fiddle with mouse events (this is described at the CSS level) by un-catching events from element containers and assigning them to nested ones.