multiple nav tag conflict

Question

I have two nav tags for mobile and desktop navigation and the problem is that the desktop menu goes to bottom when I include the second nav menu on the bottom of the page. If i set the position for the desktop menu to fixed and top 0 it will stay on top. Is there any way that I can replace the nav tag with any other alternative? I tried div but that doesn't work.

<nav><!-- desktop -->
<ul>
<li></li>
<li></li>
</ul>
</nav>


<nav><!-- mobile-->
<ul>
<li></li>
<li></li>
</ul>
</nav>

Answer 1

Just one another thing, i would like you to think about; when you use nav tag you don't need to use ul li tag, just use a tag. You gona get the same result.

Answer 2

You can identify your navigations like:

<nav id="desktopNavigation">....</nav>

<nav id="mobileNavigation">....</nav>

and use simple javascript for hiding desktop navigation or you can use another scripting lang.

But; if i was writing that code i prefer using same navigation with diferent css files like friend on top send while i wrote this explanation (using media property)

Answer 3

Use the following declaration in your CSS:

@media only screen and (max-device-width: 480px) { ... }

Put your mobile-specific code between the brackets!

(or link to entirely different CSS file like this:

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

)