Подсветка навигации удалена на подстраницах (WordPress)
При нажатии на навигацию на этой веб-странице элемент навигации остается выделенным. Если вы перейдете на одну из внутренних страниц, выделение исчезнет. Как мы можем держать основной акцент на подстраницах этой страницы?
http://www.allinsure.ca/services/ — Попробуйте перейти на подстраницу; серого выделения на Сервисах больше нет. Относится ко всем страницам с подстраницами.
Есть мысли о том, как это исправить? Я также заметил, что хлебные крошки не возвращаются на предыдущую страницу — вместо этого они ссылаются на категории портфолио.
Возможно, есть способ сказать: «Когда выбрана эта страница, выделите этот элемент навигации».
Мы используем Cherry Framework. Это и WordPress оба актуальны.
Спасибо всем!
Решение
Взгляните на класс «current-page-ancestor», который WordPress устанавливает для вашей основной навигации, когда вы находитесь на подстранице.
Таким образом, вы можете решить эту проблему с помощью чистого CSS.
просто измените эту часть в вашем main-style.css из:
.header .nav__primary .sf-menu li.current-menu-item a,
.header .nav__primary .sf-menu .sfHover a,
.header .nav__primary .sf-menu .current-menu-parent a{
background: none repeat-x scroll 0 0 #58585a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: #fff;
}
чтобы:
.header .nav__primary .sf-menu li.current-menu-item a,
.header .nav__primary .sf-menu .sfHover a,
.header .nav__primary .sf-menu .current-menu-parent a,
.header .nav__primary .sf-menu li.current-page-ancestor a{
background: none repeat-x scroll 0 0 #58585a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: #fff;
}
Я только что заметил, что класс current-page-ancestor работает только для типов страниц, но не для пользовательских типов. Чтобы выделить страницу «Службы», когда вы находитесь на записи протфолио, это немного сложнее. Вы можете достичь этого с помощью фильтра nav_menu_css_class.
function _nav_menu_css_class($classes)
{
switch (get_post_type()){
case 'portfolio':
$idOfServicePage = 1;
if (in_array('menu-item-'.$idOfServicePage, $classes)){
$classes[] = 'current-menu-item'; // or current-page-ancestor
}
break;
}
return $classes;
}
add_filter('nav_menu_css_class', '_nav_menu_css_class');
Извините, я не могу проверить свой код прямо сейчас, но у меня была похожая проблема, и я мог ее решить, используя nav_menu_css_class фильтр.
Другие решения
Других решений пока нет …