How to customize the header of the site?

Question

css

Good day. It is necessary to adapt the header for mobile devices. There are two header layouts.

1st for desktop and


2nd for mobile.


Tell me how to make such a hat? The first thing that comes to mind is to place 2 headers in html at once and, for example, on the desktop, hide the mobile header in display:none, and on the mobile resolution, on the contrary, hide the desktop header and show the mobile header.

Or is this the wrong approach and you will need to fence something with css?

Answer 1

Too complicated for CSS. Maintaining this is a real pain. Any addition of a menu item will turn into a complete overhaul. It's better to really store 2 different menus and combine them on the backend side