I am building a responsive website. The desktop version has the navigation across the bottom inside the footer. When the media query kicks in, I want my navigation to be a dropdown at the top instead. That requires a different html setup so, css alone wont move it properly and therefore media queries alone can't help.
With that said, I will need 2 sets of the navigation links in the html. one for desktop and one for mobile. One will of course gets "display:none;" based on the current media query.
Is there any penalty with google for this? I mean virtually all websites have multiple links on same pages that go to the same url so I don't consider that duplicate content but the source code would have lets say #navigation_desktop and #navigation_mobile in the source code.
I wish I could use the same navigation for both but css alone can move it around properly. its simple different coding and div structures. Any input on this?
I highly doubt you would be penalised - Googlebot is quite clever. If you are that worried the HTML5 specification has a <nav> element that makes a clear semantic distinction from page content.
The w3 page advises you still markup lists as normal, eg:
<nav>
<ul>
<li><a href="#">link
<li><a href="#">link ...
</ul>
</nav>