WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] problem getting single post to appear with correct menu styling (4 posts)

  1. keyaspects
    Member
    Posted 3 years ago #

    Hi.

    I have a basic 4 stage menu. Home, About, Events, Contact
    A blue line under menu name dictates which page you are currently on.

    The Events is actually a category and I have added this to the wp3 menu system in the admin area.

    All menus work fine and display a blue line under each one when you are on that particular page.

    On the home page I display 1 recent post from the events page in the sidebar.

    However if I click on this post and display the most recent post. The Events menu title does not have the blue line under it.

    I'm sure I'm missing something simple here as when I then click the events tab in the menu the blue line appears.

    I want the blue line to appear when viewing single posts from this category.

    Many thanks

  2. keyaspects
    Member
    Posted 3 years ago #

    any ideas anyone? Thanks in advance. Here's the code in the side bar that I'm using.

    [Code moderated as per the Forum Rules. Please use the pastebin]

    However I'm not using any template for the single.php, just the standard single.php file

  3. keyaspects
    Member
    Posted 3 years ago #

    code via pastbin as per forum rules:
    http://pastebin.com/8vcZCydL

  4. keyaspects
    Member
    Posted 3 years ago #

    Solved, if anyone else out there is trying to get the same thing to happen.

    I needed to add the following to my CSS.
    .current-post-ancestor { }
    and
    .current-post-ancestor a { }

    With the same styles I was using for:
    .current-menu-item { }
    and
    .current-menu-item a { }

    Explained below:

    .current-menu-item { } targets only the menu item the visitor pressed to get to the menu. This goes for categories as well as pages.

    .current-page-item { } targets only the current menu item if that menu item is pointing to a page and the visitor is on that page.

    .menu-item-home { } targets only the menu item that points to the root or home page of the site.

    .current-post-ancestor { } targets the menu item as long as the category the menu item points at is an ancestor of the post (so regardless of whether the post is in the category or in a sub-category under the category)

    .current-menu-parent { } targets the menu item if it is the parent of the menu to which the post belongs (yes, it’s confusing).

    .current-post-parent { } targets the menu item only if the category is the direct parent of the post (menu item will not be highlighted if the post only belongs to a category that is a child of the category the menu item points to).

    Taken from comments on the following post http://www.webcitizenmag.com/2010/05/23/how-to-highlight-current-category-in-wordpress-menu-for-single-post-pages-using-jquery/

Topic Closed

This topic has been closed to new replies.

About this Topic