множественный конфликт с тегом nav

Question

У меня есть два навигационных тега для мобильных и настольных систем навигации, и проблема в том, что меню рабочего стола снижается, когда я включаю второе навигационное меню в нижней части страницы. Если я установил положение для меню рабочего стола на фиксированное и верхнее 0, оно останется на вершине. Есть ли способ, которым я могу заменить тег nav любой другой альтернативой? Я попробовал div, но это не сработает.

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


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

Answer 1

Используйте следующее заявление в вашем CSS:

@media только экран и (макс-устройства ширина: 480px) {...}

Поместите свой Подвижная конкретный код между скобками!

(или ссылку на совершенно иной CSS-файл, как это:

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

)

Answer 2

Вы можете определить ваши плаваний как:

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

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

и использовать простой JavaScript для скрытия рабочего стола навигации или вы можете использовать другой скриптовый язык.

Но; если я пишу этот код, я предпочитаю использовать ту же навигацию с различными файлами css, как friend on top send, в то время как я написал это объяснение (используя свойство media)

Answer 3

Просто еще одна вещь, я хотел бы, чтобы вы подумали; при использовании тега nav вам не нужно использовать тег ul li, просто используйте тег. Вы получите тот же результат.