Maintain main menu highlight when a child page is selected from the drop-down « Support Forum | Kriesi.at

Support Forum » Avisio

Maintain main menu highlight when a child page is selected from the drop-down

13 posts from 2 voices

Started 2 years ago by Scott McIntyre
Latest reply from Dude
This topic is resolved

Tags:

No tags yet.

Scott McIntyre
Member

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

Posted 2 years ago #

Dude
Dude

Add following code to your style1/2/3.css:

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;
}

This should do the trick.

Posted 2 years ago #

Scott McIntyre
Member

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

Posted 2 years ago #
Dude
Dude

Do you use the menu manager to create your menus?

Posted 2 years ago #
Scott McIntyre
Member

Yes I do.

Posted 2 years ago #
Scott McIntyre
Member

Any help on this?

Posted 2 years ago #
Dude
Dude

Sry I made a mistake (used the css code from another template). Please try the code above.

Posted 2 years ago #
Scott McIntyre
Member

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

Posted 2 years ago #
Dude
Dude

I use the same css code on my site too and there it works without problems. Can you give me a link please

Posted 2 years ago #
Scott McIntyre
Member

Here you go: http://m2newmedia.com

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

Posted 2 years ago #

Dude
Dude

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:

<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/"><strong>Portfolio</strong><span> </span></a>

Posted 2 years ago #

Scott McIntyre
Member

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.

#top .nav .current-menu-parent a strong { insert however you want to style the element here; }

Posted 2 years ago #
Dude
Dude

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.

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.

Kriesi.at - Wordpress Themes and HTML Templates

Maintain main menu highlight when a child page is selected from the drop-down

Reply

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…