Current menu Item - CSS Rule « Support Forum | Kriesi.at

Support Forum » Coherence

Current menu Item - CSS Rule

3 posts from 3 voices

Started 10 months ago by reganfrank
Latest reply from Ismael
This topic is not resolved

Tags:

reganfrank
Member

Hi,

I have added a custom css. rule to highlight the current page/menu item.

/*Sidebar Nav Menu - Current Menu Items*/
#nav_menu-4.widget_nav_menu .current-menu-item > a, #nav_menu-4.widget_nav_menu .current_page_item > a {
    font-weight: bold;
	background: #f0b70c !important;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

Unfortunately, when I set it on my local system it works fine, but on the live server it does not display.

Am I missing something?

http://bit.ly/MCdWL8

Posted 10 months ago #

radugidei
Member

this is the HTML source that you need to take a look at (example on Policies page)
<div class="menu-topnav-container"> <ul id="menu-topnav-1" class="menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-3816">About Us <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3614">Why Choose Us? <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-3615">Policies <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3645">Contact Us

The problem is that your CSS code doesn't seem to target any of those classes/IDs, more specifically, the #nav_menu-4 id.

try this :
.menu-topnav-container ul:first-child > li.current_page_item > a{ font-weight: bold; background: #f0b70c !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

or

.menu-topnav-container ul.submenu > li.current_page_item > a{ ... }

if it doesn't work , try using only this :
.current_page_item { font-weight: bold; background: #f0b70c !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

hope it helps

Posted 10 months ago #
Ismael
Moderator

Hey ragudei,

Thanks for helping. :)

Regards,
Ismael

Posted 10 months ago #