Как выделить пункт меню WordPress?

Question

[Максим Киримлиди]

Добрый день.

Указал для пункта меню CSS-класс "custommycab".
В дополнительных стилях прописал

.cuctommycab {
color:blue;
}

Итог - конечно же, ничего не работает, цвет не поменялся.

Запустил инспектор в браузере, вот код элемента:

<div class="nav-wrap container"><ul id="menu-%d0%bc%d0%b5%d0%bd%d1%8e%d1%88%d0%b0%d0%bf%d0%ba%d0%b0" class="nav container-inner group"><li id="menu-item-344" class="custommycab menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14 current_page_item menu-item-344"><a href="https://school-event.site/" aria-current="page"><span class="dojodigital_toggle_title">Главная страница</span></a></li>
<li id="menu-item-351" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-351"><a href="https://school-event.site/forum/">Форум</a></li>
<li id="menu-item-335" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-335"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/">Внеклассная работа</a>
<ul class="sub-menu" style="display: none;">
	<li id="menu-item-336" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-336"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d0%ba%d0%be%d0%bd%d0%ba%d1%83%d1%80%d1%81%d1%8b-%d0%b8-%d0%b8%d0%b3%d1%80%d1%8b%d1%80/">Конкурсы и игры</a></li>
	<li id="menu-item-337" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-337"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d1%88%d0%ba%d0%be%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5-%d0%bf%d1%80%d0%b0%d0%b7%d0%b4%d0%bd%d0%b8%d0%ba%d0%b8%d1%80/">Школьные праздники</a></li>
	<li id="menu-item-477" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-477"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d1%8b%d0%b5-%d0%bc%d0%b5%d1%80%d0%be%d0%bf%d1%80%d0%b8%d1%8f%d1%82%d0%b8%d1%8f/">Внеклассные мероприятия</a>
	<ul class="sub-menu" style="display: none;">
		<li id="menu-item-479" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-479"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d0%bc%d0%bb%d0%b0%d0%b4%d1%88%d0%b0%d1%8f-%d1%88%d0%ba%d0%be%d0%bb%d0%b0-1-4-%d0%ba%d0%bb%d0%b0%d1%81%d1%81/">Младшая школа (1-4 класс)</a></li>
		<li id="menu-item-480" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-480"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d1%81%d1%80%d0%b5%d0%b4%d0%bd%d1%8f%d1%8f-%d1%88%d0%ba%d0%be%d0%bb%d0%b0-5-9%d0%ba%d0%bb%d0%b0%d1%81%d1%81/">Средняя школа (5-9класс)</a></li>
		<li id="menu-item-481" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-481"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d1%81%d1%82%d0%b0%d1%80%d1%88%d0%b0%d1%8f-%d1%88%d0%ba%d0%be%d0%bb%d0%b0-10-11-%d0%ba%d0%bb%d0%b0%d1%81%d1%81/">Старшая школа (10-11 класс)</a></li>
	</ul>
</li>
</ul>
</li>
<li id="menu-item-338" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-338"><a href="https://school-event.site/category/%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8e/">Классному руководителю</a>
<ul class="sub-menu" style="display: none;">
	<li id="menu-item-339" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-339"><a href="https://school-event.site/category/%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8e/%d0%bf%d0%be%d0%bb%d0%b5%d0%b7%d0%bd%d0%b0%d1%8f-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f%d1%80/">Полезная информация</a></li>
</ul>
</li>
<li id="menu-item-340" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-340"><a href="https://school-event.site/category/%d1%83%d1%87%d0%b8%d1%82%d0%b5%d0%bb%d1%8f%d0%bc%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b0/">Учителям</a>
<ul class="sub-menu" style="display: none;">
	<li id="menu-item-341" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-341"><a href="https://school-event.site/category/%d1%83%d1%87%d0%b8%d1%82%d0%b5%d0%bb%d1%8f%d0%bc%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b0/%d0%bc%d0%b5%d1%82%d0%be%d0%b4%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%80%d0%b5%d0%ba%d0%be%d0%bc%d0%b5%d0%bd%d0%b4%d0%b0%d1%86%d0%b8%d0%b8%d1%80/">Методические рекомендации</a></li>
	<li id="menu-item-342" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-342"><a href="https://school-event.site/category/%d1%83%d1%87%d0%b8%d1%82%d0%b5%d0%bb%d1%8f%d0%bc%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b0/%d0%be%d1%84%d0%be%d1%80%d0%bc%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%88%d0%ba%d0%be%d0%bb%d1%8b-%d1%80/">Оформление школы</a></li>
</ul>
</li>
<li id="menu-item-617" class="custommycab menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://school-event.site/account/">Мой кабинет</a></li>
</ul></div>				
								
																	<div class="container">
										<div class="container-inner">		
											<div class="toggle-search"><i class="fas fa-search"></i></div>
											<div class="search-expand">
												<div class="search-expand-inner">
													<form method="get" class="searchform themeform" action="https://school-event.site/">
	<div>
		<input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите запрос и нажмите Enter';" onfocus="if(this.value=='Введите запрос и нажмите Enter')this.value='';" value="Введите запрос и нажмите Enter">
	</div>
</form>												</div>
											</div>
										</div><!--/.container-inner-->
									</div><!--/.container-->

Мало чего понимаю, но стараюсь, вчера до 3х часов ночи сидел - ничего не получалось. Нужно изменить цвет только пункта меню "menu-item-617".
Помогите пожалуйста.

Comments

[Павел]

и где в испекторе вы увидели cuctommycab ?

[Дмитрий Павлюк]

Да, я ошибся. Писал с телефона.

Answer 1

[Дмитрий Павлюк]

Привет!

Как вариант:

.coctommycab {
color: blue !important;
}

Дело в наследуемость и весе самих стилей. Стили автора приоритетнее чем твои (скорей всего проблема в этом).

Еще можно обратиться к элементу через его id

#menu-item- 617 {
color: blue;
}

Comments

[Максим Киримлиди]

Да, он наследует стили от этого элемента. Не знаете как решить проблему?

<li id="menu-item-617" class="custommycab menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-119 current_page_item menu-item-617"></li>

[Дмитрий Павлюк]

Используй свойство !important; после указания цвета. Выше я написал как. Должно помочь.

[Максим Киримлиди]

Дмитрий Павлюк, К сожалению, не помогает. Попробовал оба ваших варианта

[Дмитрий Павлюк]

Антон Марченко, странно. Ты локально верстаешь или на сервере уже? Ссылка на сайт/проект есть?

[Дмитрий Павлюк]

Я ошибся в названии класса. Попробуй так:

.custommycab {
color: blue !important;
}

[Максим Киримлиди]

Дмитрий Павлюк, Да, вот ссылка https://school-event.site/
Да я заметил что ошиблись, исправил, но всё равно не сработало :(

[Дмитрий Павлюк]

Попробуй так:

.custommycab a {
color: blue !important;
}

[Максим Киримлиди]

Дмитрий Павлюк, Сработало! Спасибо вам большое xD

Answer 2

[approximate solution]

Мало чего понимаю, но стараюсь, вчера до 3х часов ночи сидел - ничего не получалось. Нужно изменить цвет только пункта меню "menu-item-617".

В чем проблема написать то же самое для вашего menu-item-617? Я так понимаю вы просто хотите выделить отдельный пункт меню, не активный, так смело пишите стили под конкретный элемент обращаясь к классу, или можете достучаться до элемента через nth-child

Comments

[Максим Киримлиди]

Пытался обращаться к menu-item-617, но ничего не выходит.
Прошу прощения, а что такое nth-child?

[approximate solution]

Антон Марченко, https://web-standards.ru/articles/nth-child/
Напишите свой телеграмм, если не получиться сделать самостоятельно, помогу Вам.

Answer 3

[Павел]

У Вас как минимум ошибка в написании классов, в верстке custommycab,
а описываете вы cuctommycab.
Укажите один класс, и используйте important, если WP перекрывает ваш стиль

.custommycab{
color: blue !important;
}