WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Current Menu Highlight on Pages Does Not Work

[Resolved] Current Menu Highlight on Pages Does Not Work

  • Code I am using is:

    .nav .current_page_item a {text-decoration:overline;}

    But only ‘Home’ and ‘Contact’ pages gets highlighted. I cannot get the other menus to highlight while on a post (submenu links).

    I have tried .current_menu and _page _ancestor combinations and none of them seems to address the problem.

    http://0thmirageknight.com/

Viewing 7 replies - 1 through 7 (of 7 total)
  • .current-menu-parent or .current-menu-ancestor should do the trick

    I tried

    .nav .current_page_item a, .current_menu_parent a, .current_menu_ancestor a {text-decoration:overline;}

    Unfortunately none of those work.

    Could it be because a menu like ‘Contact’ is an actual page, but the other menus are not? (They are not clickable and have an empty link).

    hyphens – not underlines:

    .current-menu-ancestor

    http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

    example:

    .nav .current-menu-parent a { text-decoration: overline; }
    or
    #primary-nav .current-menu-ancestor a { text-decoration: overline; }

    That seems to have done the trick thanks!

    .current_page_item is not present in the nav;

    you need to have the .nav in-front of each .current-menu-thingy

    .nav .current-menu-parent a {text-decoration:overline;}

    It works now thanks, but the sub-menus also get overlined.

    I’m trying to target sub-menus with text-decoration:none;

    Is there a better way?

    I have it fixed thanks to a friend, here is the code I used and see it in effect at my website

    /*overline current menu item: for pages*/
    .nav .current-menu-item a {
    	text-decoration:overline;
    }
    
    /*overline current menu parent: for non-linked menu with submenus*/
    .nav .current-menu-parent a {
    	text-decoration:overline;
    }
    
    /*overline menu when hover*/
    .nav ul li a.hover,
    .nav ul li a:hover {
    	text-decoration:overline;
    }
    
    /*prevents submenu overline upon hover*/
    .nav ul ul li a.hover,
    .nav ul ul li a:hover {
    	text-decoration:none;
    }
    
    /*prevents selected submenu overline*/
    .nav .current-menu-parent ul.sub-menu a {
           text-decoration:none;
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Current Menu Highlight on Pages Does Not Work’ is closed to new replies.
Skip to toolbar