Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #10463

    I would like to keep “PORTFOLIO” in the main navigation still active when you click on one of the portfolio items to view more of that work.

    Using the demo as an example, here portfolio is still highlighted / active:

    But once I click on a portfolio item, nothing in the main nav is highlighted:

    Is there a way to force “PORTFOLIO” to still be highlighted even though it’s not really connected I guess?

    I really need this to work and I hope you could steer me in the right direction.

    Thank you!


    I also support this request.


    Hey! As already mentioned in a previous thread: I am sorry but that is not possible. The reason for this is that there is no connection that wordpress could find between single portfolio entries and portfolio overviews:

    A single portfolio entry can be shown on any number of portfolio overview pages and wordpress cant know which one was used to navigate to the single entry. This one to many relationship prevents proper highlighting of the menu items.


    I’m a newb when it comes to PHP… but I did find this article. Would this work? I just can’t wrap my head around it all: (Purchase code hidden if logged out) -wordpress-doesnt/



    I don’t think so. Maybe you could use some code parts as a starting point but this solution wouldn’t integrate seamlessly into the avia framework.




    Sorry, but I really need to get this to work. It just seems sloppy if all other pages can be active and this can’t be.

    Do you guys do custom work then?

    I also found this: (Purchase code hidden if logged out)(Purchase code hidden if logged out) -wordpress-custom-post-type/

    If I can set the parent for the portfolio custom post type, then wouldn’t it work?




    Hi Sara,

    If I understand all you really want is “Portfolio” to be highlighted in the main menu when on a single portfolio page. If I’m not mistaken this can be “faked” simply by adding some CSS to your custom.css or Quick CSS box under Angular > Theme Options > Styling.

    The CSS you would want to add is:

    body.single-portfolio .main_menu ul li#menu-item-407 a {
    border-bottom: 2px solid #f0b70c;

    To explain what’s going on here: I’ve set the menu item #407 to the active state on every page that has the body class “single-portfolio” which would be all your individual portfolio pages.

    Now a couple of caveats to this:

    1) #menu-item-407 is the ID of “Portfolio” in the demo’s menu. The number you use will be different. To find out what yours is, you’ll need to view your page’s source code and find the link for the portfolio page. You’ll be looking for something like this:

    <li id="menu-item-###" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-###"><a href="LINK-TO-YOUR-PORTFOLIO">Portfolio</a>

    Once you found the number replace 407 in the code I provided above and you should be good to go.

    2) The color code (#f0b70c) for the border will change depending on your website’s skin. So you’ll want to change that as well.

    Let us know if you need help with finding your menu item ID.




    YOU ARE A GENIUS!!!!!!!!!

    This is exactly what I needed.

    Thank you thank you thank you!!!! Can I buy you a beer?

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

The topic ‘Current menu item / page item active states for portfolio items’ is closed to new replies.