SEO - Responsive Website and Duplicated Menus

You have nothing to worry about. You can use display: none; to switch menus. Search engines are much better at understanding JS and CSS.

As long as you are not intentionally trying to manipulate things to get a better ranking. Using display: none; to hide big blocks of text will get you penalized. So if you are only using to hide your desktop menu on mobile and visa verse you are not in any danger. Take a look a this old thread from StackExchange:

How bad is it to use display: none in CSS?

Google is actually quite fond of responsive design and prefers it to a separate mobile site.

Here is a good article on "SEO of Responsive Design"

Also, check out this article/video:

Matt Cutts (Google), said that you don’t have to worry about there being a down side, related to SEO, when using a responsive design approach for mobile web sites.

You can use display: flex and then specify an alternative order: n value for divisions that moves your menu division above or below other divisions.

In other words, you don't need two menus with the same content if you always hide one or other of them.

• A guide to FlexBox
• W3C Flexible Box Layout

Most mobile menu's are "opened" via a button click, essentially opening in a modal window of some sort or another. When it comes to a website meeting accessibility standards - those menu's need to be placed in the DOM in a deliberate fashion. It isn't enough to simply use one NAV in the header and apply different CSS to achieve the desired layout (in most cases).

Bottom line - if your menu isn't initially visible, and overlays the rest of the content - it will probably be necessary to have multiple nav elements placed in different positions in the DOM (hiding one and showing the other depending on screen size and desire).