Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #14671

    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

    #84418

    this is the HTML source that you need to take a look at (example on Policies page)

    Code:
    <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 :

    Code:
    .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

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

    }

    if it doesn’t work , try using only this :

    Code:
    .current_page_item {
    font-weight: bold;
    background: #f0b70c !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }

    hope it helps

    #84419

    Hey ragudei,

    Thanks for helping. :)

    Regards,

    Ismael

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Current menu Item – CSS Rule’ is closed to new replies.