Support » Theme: Sketch » Archive Page Menu Links not recieving ‘current-menu-item’ class

  • Resolved mseybert8

    (@mseybert8)


    I have CSS written to make the menu item for the current page have a teal (#00A39C) color, however, the menu items for the two Archive Pages I’m using do not have the “current-page-item” or “current-menu-item” class applied to them. Here is the CSS I am using.

    .current_page_item a, .current-menu-item a {
    color: #00A39C !important;
    }

    That works for my other two menu items, the “Home” and “About Mike” links. However, for “Articles” or “Resources” the active menu does not get that teal color since those two menu items do not get the “current-page-item” or “current-menu-item” classes for some reason.

    I don’t understand why those two links behave differently than the first two. I added those two links to my primary menu in the exact same way as the “Home” and “About Mike” links that do work. None of my menu items have any additional CSS classes applied to them. Can you help me get the Current Menu link to behave the same for all 4 of my menu items?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • It is because the Articles/Resources links are not Pages in the dashboard.

    Thread Starter mseybert8

    (@mseybert8)

    Thank you for your quick response! I went in to my Primary Menu and ensured that all four of my links are displaying “Page” as their link type. As I mentioned in my first post, “I added those two links to my primary menu in the exact same way as the “Home” and “About Mike” links that do work”, which includes making sure they were added as “Page” links.

    From the WP Menus dashboard all 4 of those links appear identical to me in how they are setup, which is why I am confused why they are behaving differently.

    Do you have any other thoughts as to why those two are not getting that additional class added to them when they are the current page?

    Interesting! Do the Articles/Resources pages have a different page template compared to the Home/About Me pages?

    Thread Starter mseybert8

    (@mseybert8)

    Those two pages are actually the Archive page for their respective post type. I’m using Pods to create custom post types of Articles and Resources and then displaying all items of that post type on their respective Archive Pages. That’s the only difference I can see between those two pages and the two that behave correctly, but I can’t tell why that would matter as long as those Archive Pages are of type “Page”. Those menu items appear to have all the same other classes applied to them as the two that work, specifically all four menu items have the “menu-item-object-page” class on them when I inspect them in the console.

    Does that give you any ideas I can try? I can always write some custom JS to handle applying that class to those two pages when appropriate, but I’d prefer to at least know why those two aren’t working before going about trying to fix it.

    Those two pages are actually the Archive page for their respective post type

    Right, so archive pages aren’t pages, in the sense that a page created in the editor is one. A page in the editor is a static page, meaning it only ever contains the content you manually add to it in the editor. While archive pages are dynamic pages, updating themselves automatically as you publish new posts over time.

    And archive pages aren’t added to the menu from the Pages section, as they shouldn’t even be listed there. For a custom post type, if the plugin adding that CPT is following standard practice, it would get its own tab in the menu item options. So the archive pages for the Testimonial CPT would be under the Testimonial tab, and Portfolio projects would be under the matching tab, along with standard taxonomies like categories and tags, CPT taxonomies like project types and project tags, and post format archive pages.

    For example, on my test site with this theme, with the Jetpack portfolio and testimonial CPTs enabled, this is how it looks:

    Customize Projects My Core Sandbox

    To add any type of archive page I’d click on the appropriate tab in the menu interface, not the Pages tab.

    And on that test site all archive pages I add in this way correctly has the current-menu-item class added, and those links become highlighted when I’m viewing that archive page. So it sounds like these archive pages of yours aren’t playing by the standard rules.

    You mention using “Pods” to create these custom post types. What exactly is that, and what are the custom post types you’re creating?

    From what I can see, your archive pages aren’t being created with whatever meta-data is required to identify it as an archive page, and that’s not something the theme has control over. So I suspect this will need to be fixed with the plugin that you’re using to add those CPTs and generate those archive pages on your site.

    Thread Starter mseybert8

    (@mseybert8)

    You nailed it!

    I went back in to Appearance -> Menus and initially it didn’t seem like I had an option to add CPTs to my menu but after some googling about adding Pod CFT Archive pages to menus I found that by default those Pod CPTs are hidden on the menu screen.

    I just had to go under screen options and enable those CPTs to make them visible, and once those were visible I added those Archive Pages like you suggested and now everything is working perfectly. Thank you!

    Glad you managed to figure it out. And thanks for sharing the solution here. Hopefully it will help someone else struggling with the same thing in future 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Archive Page Menu Links not recieving ‘current-menu-item’ class’ is closed to new replies.