CSS

Спрятать навигацию (Пред/След) на маленьких дивайсах

Слов в тексте – 155, время чтения в минутах – 1

Как правило, когда вы дочитали публикацию до конца, предлагается пройти к предыдущему или следующему посту.

Если названия длинные, на телефонах эти навигационные ссылки могут накладываться друг на друга, портя общую картину.

Самый простой код CSS следующий (если ссылки nav-links):


@media (max-width: 768px) {
    .nav-links {
        display: none !important;
    }
}

Понятно, если класс ваших ссылок не nav-links, нужно поставить его. Найти класс достаточно просто: в браузере с помощью правой клавиши мышки найдите нужный код элемента.

Код выше не всегда решает проблему из-за специфики шаблона вашего блога или настроек JavaScript.

Вот ещё несколько дополнительных вариантов кода:


@media (max-width: 768px) {
    .nav-links {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    }
}



@media (max-width: 768px) {
    .nav-links {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}



@media (max-width: 768px) {
    .nav-links {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .nav-links {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    }
}

Не забудьте заменить nav-links на нужный класс требуемого элемента.





Рубрики блога

CSS (22) Фрагменты кодов (16) Плагины (8) Ненужные советы (5) Шорткоды (4) Разное (4) WordPress (3) Юмор (3) Виджеты (3)

Заметки на схожую тематику

 newsbee Media