Изменить цвет одной кнопки в меню (выделить)

Решено denyskozhushko
(@denyskozhushko)

1 год, 9 месяцев назад

Всем привет! Столкнулся с проблемой… Необходимо в шапке сайта, в меню изменить цвет одной ссылки «спеціальні пропозиції» , необходимо что-бы цвет этой ссылки был красный! Перепробовал несколько варантов, но ничего не выходит

Буду благодарен за помощь!

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 13 ответов — с 1 по 13 (всего 13)

tuxfighter
(@tuxfighter)

1 год, 9 месяцев назад

https://osokor-med.com.ua/

сайт заблокирован для России

Автор denyskozhushko
(@denyskozhushko)

1 год, 9 месяцев назад

Это понятно! Но, может кто-то сталкивался с тем, что необходимо было выделить другим цветом одну кнопку в меню хедера.

Модератор Yui
(@fierevere)

永子

1 год, 9 месяцев назад

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

tuxfighter
(@tuxfighter)

1 год, 9 месяцев назад

С помощью css.
Для нужной кнопки добавляешь правило с ее новым цветом.

Модератор Юрій
(@yube)

1 год, 9 месяцев назад

Обычный метод: в редакторе меню добавить класс пункту меню и в дополнительных стилях прописать оформление для этого класса.

Костыль: в доп.стили добавить что-то типа
#menu-item-2283 a { color: red; }
Автор denyskozhushko
(@denyskozhushko)

1 год, 9 месяцев назад
@yube я в этом деле еще новичок, поэтому еще испытываю сложности с вводами разных кодов и так далее. Есть еще решение https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item, но вообще не пойму как и куда все вводить.

Вот фрагмент кода моего меню, в котором собственно необходимо поменять цвет одной ссылки…
```
.header__menu>nav>ul>li>a {
    color: #000000;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.714;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: var(--kmnd-transition);
    -o-transition: var(--kmnd-transition);
    transition: var(--kmnd-transition);
}
```
как добавить класс пункту меню я понимаю, но вот дальше уже голова болит )
- Ответ изменён 1 год, 9 месяцев назад пользователем denyskozhushko.
- Ответ изменён 1 год, 9 месяцев назад пользователем denyskozhushko.
- Ответ изменён 1 год, 9 месяцев назад пользователем denyskozhushko.
- Ответ изменён 1 год, 9 месяцев назад пользователем denyskozhushko.
Модератор Юрій
(@yube)

1 год, 9 месяцев назад

еще испытываю сложности с вводами разных кодов

А не надо вводить, надо просто скопировать и вставить. Делается одной лишь мышь, не касаясь клавиатуры.
1. Здесь:
1.1. Выделить код #menu-item-2283 a { color: red; }
1.2. Нажать правую кнопку мыши
1.3. Нажать Copy
2. На своем сайте:
2.1 Customize
2.2 Additional CSS
2.3 Ткнуть в поле ввода
2.4 Нажать правую кнопку мыши
2.5 Нажать Paste
2.6 Нажать Publish

Проще некуда.

Модератор Юрій
(@yube)

1 год, 9 месяцев назад

С классом придется касаться клавиш 🙂

Присваиваем класс, например, ‘menu-red’. тогда в доп.стили добавляем что-то такое:
.header__menu > nav > ul > li.menu-red > a { color: red; }

Возможно, будет достаточно
li.menu-red > a { color: red; }
Автор denyskozhushko
(@denyskozhushko)

1 год, 9 месяцев назад
@yube Спасибо большое человеческое! Получилось!

но. получилось что-бы отображалось верно когда нахожусь в админке сайта, через инкогнито хрома захожу, изменений нет…
- Ответ изменён 1 год, 9 месяцев назад пользователем denyskozhushko.
Модератор Юрій
(@yube)

1 год, 9 месяцев назад

через инкогнито хрома захожу, изменений нет…

Кэши сбросьте.



Автор denyskozhushko
(@denyskozhushko)

1 год, 9 месяцев назад

@yube и кэш пробовал сбросить, не помогло. Ох и достался мне в наследство сайт. Пробовал на других своих сайтах поменять, все работает и отображается верно.

Модератор Юрій
(@yube)

1 год, 9 месяцев назад

Да все там нормально.

Автор denyskozhushko
(@denyskozhushko)

1 год, 9 месяцев назад

@yube да, уже все ок! большое спасибо за помощь!