Community Forums › Forums › Archived Forums › General Discussion › How to get the right menu-item highlighted
- This topic has 8 replies, 3 voices, and was last updated 10 years, 6 months ago by Toon61.
-
AuthorPosts
-
September 3, 2013 at 11:30 am #60467Toon61Member
Hi all,
I'm using the Executive child-theme.
I have some sub-items under a menu-item.
What I want, is that the menu-item gets highlighted (selected) when I choose/select one of the sub-items.
To clarify this:
I have a menu-item called 'About Us'.
I have a sub-menu-item (a drop-down menu-item) called 'Team'.
When I select 'About Us', the menu-item is highlighted (default behavior in this theme, shown in a different color), but when I select 'Team' (a sub-menu-item from 'About Us') I don't get that highlight.
How can I get the menu-item 'About Us' highlighted in this case, because 'Team' is a sub-menu-item, so 'About Us' should (I want it to) be highlighted.Any suggestions?
p.s.: All sub-items are pages, not posts.
September 4, 2013 at 5:17 pm #60729bandjMemberurl?
September 5, 2013 at 12:56 am #60787Toon61MemberThis reply has been marked as private.October 12, 2013 at 1:56 am #66384MarleMemberOctober 12, 2013 at 2:44 am #66391MarleMemberOk, I just worked it out myself.
October 12, 2013 at 7:21 am #66408Toon61MemberMarle,
Can you tell me how you did it.
Because you wrote in a previous comment: 'I did get it working using the method suggested here'.
What is 'the method suggested here'?October 12, 2013 at 12:21 pm #66430MarleMemberSo this is what I worked out. I am fairly new to this so I welcome any corrections/refinements.
I found that by making some CSS changes I could get the menu main item to stay highlighted when a sub menu item is opened.
The CSS I used works when the main item is the (page) parent of the sub item. By that I mean the heirarchy created when creating/editing a page, NOT creating the menu itself.The CSS is changed in 2 places in the child theme's CSS.
First, In addition to this code that is already there
.genesis-nav-menu .current-menu-item > a { background-color: #e04b4b; color: #fff;
I added directly below it
.genesis-nav-menu .current-page-ancestor > a { background-color: #e04b4b; color: #fff;
Note I also changed the background colour to be consistent with the red styling preset.
Then further down the Stylesheet current-menu-item was replaced with current page ancestor
.executive-pro-red .enews-widget input[type="submit"], .executive-pro-red .content .entry-header .entry-meta .entry-comments-link, .executive-pro-red .genesis-nav-menu .current-page-ancestor > a, .executive-pro-red .archive-pagination li a, .executive-pro-red a.button, .executive-pro-red button, .executive-pro-red input[type="button"], .executive-pro-red input[type="reset"], .executive-pro-red input[type="submit"] { background-color: #e04b4b; }
I am using the red preset, so I only cnanged the code here. If you were using say, the blue preset, make the CSS change there.
Hope that helps.
October 14, 2013 at 9:02 am #66645Toon61MemberMarle,
This looks good, I'm going to try that.
I'll keep you posted.October 16, 2013 at 8:17 am #66984Toon61MemberHi Marle,
The CSS for the menu in the Executive theme is slightly different then in your example.
But I got it working!!!Thank you so much for pointing it out.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.