WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Current Menu Highlight on Pages Does Not Work (8 posts)

  1. stargazer713
    Member
    Posted 1 year ago #

    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/

  2. Andrew Bartel
    Member
    Posted 1 year ago #

    .current-menu-parent or .current-menu-ancestor should do the trick

  3. stargazer713
    Member
    Posted 1 year ago #

    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).

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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; }

  5. stargazer713
    Member
    Posted 1 year ago #

    That seems to have done the trick thanks!

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    .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;}
  7. stargazer713
    Member
    Posted 1 year ago #

    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?

  8. stargazer713
    Member
    Posted 1 year ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic