Support Forum - Topic: Maintain main menu highlight when a child page is selected from the drop-down

Support Forum - Topic: Maintain main menu highlight when a child page is selected from the drop-down http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down Support Forum - Topic: Maintain main menu highlight when a child page is selected from the drop-down en-US Tue, 21 May 2013 23:19:36 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Dude on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6234 Thu, 07 Oct 2010 16:48:43 +0000 Dude 6234@http://www.kriesi.at/support/ Great. Your code styles the page name but not the description below. If you want to color the whole link you need to remove the strong attribute. Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6229 Thu, 07 Oct 2010 16:37:00 +0000 Scott McIntyre 6229@http://www.kriesi.at/support/ Dude, I finally figured it out. This is the proper CSS declaration to style a parent menu item when a child menu item is active. This might be of service to someone else. <code>#top .nav .current-menu-parent a strong { insert however you want to style the element here; }</code> Dude on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6173 Thu, 07 Oct 2010 08:07:08 +0000 Dude 6173@http://www.kriesi.at/support/ Please add the css code above to your style1.css. I couldn't find it in style.css and style1.css. The css should work as i.e. the portfolio link has all necessary classes: <pre><code><li id="menu-item-212" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor"><a href="http://m2newmedia.com/portfolio/">Portfolio </a></code></pre> Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6172 Thu, 07 Oct 2010 06:49:26 +0000 Scott McIntyre 6172@http://www.kriesi.at/support/ Here you go: <a href="http://m2newmedia.com" rel="nofollow">http://m2newmedia.com</a> If you go to the "Portfolio" parent page - the menu item "Portfolio" is bold. If you go to a sub-page the parent page menu item goes back to normal font-weight. I can't figure out the cascade. Thanks for your help. S PS: Obviously we're still working out design changes, just using dummy content right now Dude on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6170 Thu, 07 Oct 2010 06:38:17 +0000 Dude 6170@http://www.kriesi.at/support/ I use the same css code on my site too and there it works without problems. Can you give me a link please Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6169 Thu, 07 Oct 2010 06:33:14 +0000 Scott McIntyre 6169@http://www.kriesi.at/support/ I did use that code - it has no effect on the parent menu item when on a sub page. I've also tried various classes as tests with no luck. The parent menu item is being controlled by a css declaration in the default (style.css) on the strong tag when a user is on a sub-level page. I'm very experienced with css and the specificity of the cascade -- just can't seem to get this. I would have expected this to be a pretty basic function of a multi-level menu Dude on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6166 Thu, 07 Oct 2010 06:26:47 +0000 Dude 6166@http://www.kriesi.at/support/ Sry I made a mistake (used the css code from another template). Please try the code above. Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6164 Thu, 07 Oct 2010 06:26:15 +0000 Scott McIntyre 6164@http://www.kriesi.at/support/ Any help on this? Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6125 Wed, 06 Oct 2010 17:01:53 +0000 Scott McIntyre 6125@http://www.kriesi.at/support/ Yes I do. Dude on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6124 Wed, 06 Oct 2010 16:59:55 +0000 Dude 6124@http://www.kriesi.at/support/ Do you use the menu manager to create your menus? Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6121 Wed, 06 Oct 2010 16:42:49 +0000 Scott McIntyre 6121@http://www.kriesi.at/support/ Hey Dude (great handle by the way) - Unfortunately those aren't getting it done. It looks like that element (when a subpage is active) is being controlled by this CSS declaration in the style.css sheet on line 214 or so: .nav li a strong {display:block;font-size:12px;font-weight:normal;} And I can't get closer in the cascade to effect this -- any thoughts? PS: I put a mod on the declaration above to change the font size, but otherwise it's stock from the default theme. Thanks, Scott Dude on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6093 Wed, 06 Oct 2010 10:50:24 +0000 Dude 6093@http://www.kriesi.at/support/ Add following code to your style1/2/3.css: <pre><code>ul li.current_page_item a, ul li.current-menu-item a, ul li.current-page-ancestor a, ul li.current-post-ancestor a { color: #222222; }</code></pre> This should do the trick. Scott McIntyre on "Maintain main menu highlight when a child page is selected from the drop-down" http://www.kriesi.at/support/topic/maintain-main-menu-highlight-when-a-child-page-is-selected-from-the-drop-down#post-6066 Tue, 05 Oct 2010 23:02:58 +0000 Scott McIntyre 6066@http://www.kriesi.at/support/ I think this issue may have been addressed in another post but it was in German. :-) Is there a way to retain the CSS Class (.current-menu-item a strong) on the top level menu item when a sub-level page is chosen from a drop-down. Specifically, if I have a menu "Portfolio" on the top-level and I go to that page, the the menu item "Portfolio" is styled using the class mentioned above. But if I go to a sub-level (child) page (let's say: "Web Design") of "Portfolio" - then the "Portfolio" menu item is no longer highlighted as I am now in "home/portfolio/web-design Anyway to maintain that highlight through a new CSS declaration or some change in the JS controlling the menu? Thanks