Блог

Главная - Вопросы по программированию - Как создать отдельную навигацию на десктопе или мобильном устройстве?

Как создать отдельную навигацию на десктопе или мобильном устройстве?

#css

Вопрос:

  1. Я использую этот шаблон в качестве основы для своего портфолио, https://html5up.net/phantom

В настоящее время существует навигация по гамбургерам как в Интернете, так и на мобильных устройствах. Как я могу сделать так, чтобы меню гамбургеров отображалось только на мобильном устройстве? Я попытался изменить экран @media и (max-width: 736 пикселей) { на 480 для меню CSS, но это ничего не меняет ..?

  1. Также есть ли способ изменить розовое наведение меню?

Ответ №1:

Простое решение, но вроде как работает.

  • Настроить отображение меню бургеров: заблокировать;
  • затем установите @media only screen и (min-width: ширина, которую вы хотите), а внутри установите для меню burger значение display: none; Это означает, что из-за ширины, которую вы задаете в медиа-запросах, меню не будет отображаться.

Наведите курсор мыши, чтобы вы могли легко изменить. Просто найдите в коде, где у :hover есть свойство color:;, установленное на pink, и в вашем коде переопределите его, нацелившись на элемент и добавив:hover, а затем добавив цвет, который вы хотите, чтобы он был.

Комментарии:

1. Я просмотрел весь документ и не могу найти розовый,

2. Я нашел это, хотя: #menu > .close:before { background-image: url(«данные: изображение / svg xml;charset=utf8,<svg xmlns=’ w3.org/2000/svg ‘ width=’100′ height=’100′ viewBox=’0 0 100 100′ preserveAspectRatio=’нет’>line { ширина штриха: 8 пикселей; штрих: #f2849e; }»); непрозрачность: 0; }

Ответ №2:

 /*use*/
@media only screen and (max-width: 736px){

      /*then put the hamburger class here*/



}
Метки: