WordPress.org

Forums

Twenty Fourteen
Highlight primary menu item when sidebar menu item is selected (13 posts)

  1. Frugalmeister
    Member
    Posted 9 months ago #

    Hi everyone,

    I have a primary menu and multiple secondary menus which are displayed depending on which primary menu item is selected. I would like it so that when any item in a secondary menu is selected, the matching primary menu item is highlighted.

    Here is a sample webpage:

    http://gangapremhospice.org/wordpress/donate/

    As you can see, the primary menu item is highlighted only when the first secondary menu item is selected. I would like this to work for all secondary menu items, whether they lead to a page or category page.

    If someone could help me with some simple code to achieve this, it would be greatly appreciated.

    Thanks!

    Frugalmeister

  2. Andrew
    Nuh uh moderator
    Posted 9 months ago #

    We can't see your site behind a login page, don't post your login credentials here. Just make the site public.

  3. Frugalmeister
    Member
    Posted 9 months ago #

    Sorry about that. Forget to set it to public. Visible now.

    Frugalmeister

  4. Andrew
    Nuh uh moderator
    Posted 9 months ago #

    Add this to your Child Theme style.css file:

    #primary-navigation .current-page-ancestor {
        background-color: #677282;
        font-weight: 900;
    }
  5. Frugalmeister
    Member
    Posted 9 months ago #

    Wow, that works great for pages!

    Can we also get it to work for categories? The menu items in the secondary menu are a mix of pages and category pages.

    For instance, if you click on the "Fundraising" menu item in the secondary menu of the page I linked, the corresponding primary menu item isn't highlighted.

    Thank you!

    Frugalmeister

  6. Andrew
    Nuh uh moderator
    Posted 9 months ago #

    Your menu doesn't output any current classes on your categories

  7. Frugalmeister
    Member
    Posted 9 months ago #

    Does that mean it can't be done? I'm a bit of a noob but trying to learn as I go.

    Frugalmeister

  8. Andrew
    Nuh uh moderator
    Posted 9 months ago #

    Probably can be done by modifying the code that spits out the menu, but I don't know. Look at the wp_nav_menu function in codex

  9. Frugalmeister
    Member
    Posted 9 months ago #

    Am I looking for a class assigned to the categories located in the secondary menu?

    Frugalmeister

  10. Bob Varaleau
    Member
    Posted 9 months ago #

    Not really sure what you are looking for but you could try this in your CSS file and see what happens. It works perfectly for me. You can change the colour and font if you like.

    #secondary .site-navigation .current_page_item > a
    #secondary .site-navigation .current_page_ancestor > a,
    #secondary .site-navigation .current-menu-item > a,
    #secondary .site-navigation .current-menu-ancestor > a{
         font-weight: bold;
         color: #ca7d4f;
    }
  11. Andrew
    Nuh uh moderator
    Posted 9 months ago #

    To clarify, if you go to a page that is within a category you'll find that category isn't highlighted in the main navigation: http://gangapremhospice.org/wordpress/category/donate/fundraiser/ - See, "Donate" should have the current-menu-item styles.

  12. Frugalmeister
    Member
    Posted 9 months ago #

    I appreciate your help guys.

    Another example, maybe a more clear one, is the "News" category, a primary menu item which only links to categories within the "News" category:

    http://gangapremhospice.org/wordpress/category/news/

    Frugalmeister

  13. Frugalmeister
    Member
    Posted 8 months ago #

    Is there a way to trigger a primary menu item highlight via code?

    This is what I'm thinking. Depending on which primary menu item is selected, a unique secondary menu is loaded on the page. This is working perfectly at the moment. I want to make it so that if a specific secondary menu is loaded, the correct primary menu item is highlighted.

    Could someone help me with this?

    Thanks.

    Frugalmeister

Reply

You must log in to post.

About this Theme

About this Topic