Keep the menu links active when selected

ncard
(@ncard)

9 years, 6 months ago

Hi guys,

I´m working on this theme and i´m trying to keep the selected menu item active.
Example:

>services
>catalog
>contacts

on mouseOver is changes to underline and color. What i need is the link that i click keeps selected so that the user knows were he is.

Thanks a lot.

Viewing 7 replies - 1 through 7 (of 7 total)

ElectricFeet
(@electricfeet)

9 years, 6 months ago

This already happens by default—see the demo theme page. For example, if you go to Layouts > Full width, “Layouts” is in a different colour.

Thread Starter ncard
(@ncard)

9 years, 6 months ago

Hi
@electricfeet, thanks for your feedback.
I can see that the main menu is configured like that. But if i create a custom Menu and put it in a widget area that doesn´t happens.

For example:

http://demo.themesandco.com/layout-test/

if you click in the recent posts, the link that you click doesn´t stay selected so the user know were he is.
Is there any way to accomplish this?

Thanks.

ElectricFeet
(@electricfeet)

9 years, 6 months ago

Out of my depth here on how WordPress works. I have a separate “blog” page and all my posts get tagged automatically in such a way that I can highlight the “blog” item on the menu. (WordPress knows “where the user is” and gives the menu items classes of “current-menu-item” and “current-menu-ancestor” etc., so you/the theme can style a menu item to be a different colour accordingly.)

Also pages get tagged in this way.

When the blog is on the main page, however, WordPress doesn’t seem to indicate “where the user is” for a random post. The only thing that I can think is that you could add them manually when you write the posts (via screen options), but that seems a bit Heath-Robinson.

Where is your blog? On the front page or a separate page? How would you define “where the user is” for a post accessed from the front page?

For pages, I note that if you make the pages “children” of a parent page (Edit a page > Page attribute > Parent > choose a page) then it picks up the classes in order to be coloured—maybe this is all you need…

Thread Starter ncard
(@ncard)

9 years, 6 months ago

Hi
@electricfeet, thanks again for your feedback.

I send you a image link that possibly explains what i need.

The link História is clicked but does not assume a diferent color.
Can you please point me the directions to accomplish this effect?

Thanks again!.
rdellconsulting
(@rdellconsulting)

9 years, 6 months ago
I have a site using twentytwelve which uses this to achieve your aim (my color scheme):
```
.main-navigation .current-menu-parent > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_parent > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
 color: red;
 font-weight: bold;
 opacity: 1;
}
```
Can’t translate this to Czr without a link to your site.
Thread Starter ncard
(@ncard)

9 years, 6 months ago
Hi,

@rdellconsulting, you saved my day!!!
```
/*left menus*/
.menu-empresa-container .current-menu-item {
 background:#ddd;
 font-weight: bold;
}
.menu-nutricao_menu-container .current-menu-item {
 background:#ddd;
 font-weight: bold;
}
.menu-laboratorio-container .current-menu-item {
 background:#ddd;
 font-weight: bold;
}
```
Had to do to the three menus i created (the ones that are in bold.
Thanks a lot @electricfeet and @rdellconsulting.

One drink on me! Cheers!!!
Thread Starter ncard
(@ncard)

9 years, 6 months ago
Ups! the is not supposed to be inside the code!
```
/*left menus*/
.menu-empresa-container .current-menu-item {
 background:#ddd;
 font-weight: bold;
}
.menu-nutricao_menu-container .current-menu-item {
 background:#ddd;
 font-weight: bold;
}
.menu-laboratorio-container .current-menu-item {
 background:#ddd;
 font-weight: bold;
}
```

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Keep the menu links active when selected’ is closed to new replies.

Tags