Main menu items active while on child and grandchild pages « Support Forum | Kriesi.at

Support Forum » Corona

Main menu items active while on child and grandchild pages

8 posts from 4 voices

Started 1 year ago by demtnman
Latest reply from vibeGirl
This topic is not a support question

Tags:

demtnman
Member

I have added hover and active effects to the items on the main menu. I would like them to also show active while on their subpages. I have created the pages to be children and grandchildren of the menu items. Would you mind helping me with the CSS to assign this?
Thanks in advance.

Posted 1 year ago #

Dude
Dude

Hey,
use following css code (in css/custom.css) and adjust the color values:

.current-menu-item a {
color: #444444;
}

.main_menu li.current-menu-parent a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

.main_menu li.current-menu-parent ul li.current-menu-item a, .main_menu li.current-menu-ancestor ul li.current-menu-item a {
    color: #777777 !important; /* highlight color */
}

.main_menu li.current-menu-parent ul li a, .main_menu li.current-menu-ancestor ul li a {
    color: #444444  !important; /* default nav link color */
}

Posted 1 year ago #

colorit2
Member

Hi,

this code works fine. But I need this for the submenu, too.

Screenshot of my site:
http://i41.tinypic.com/dmp9gp.jpg

I have tried this CSS without success:

#header .submenu a:active { color:#d59cb4 !important; text-decoration: underline; }

and alternatively this

.submenu .menu li a:active { color:#d59cb4 !important; }

None of them is working. I would like to have an active link color, when I am at one of these subpages from this submenu.

Hovering is working with this:

#header .submenu a:hover{ color:#f2f6fa; text-decoration: underline; }

but I don't get it to work with the active link color.

Could someone help me please? Thanks a lot!

Posted 1 year ago #

Dude
Dude

You can try:

.submenu .menu li.current_page_item a, .submenu .menu li.current_page_item a:hover{
color:#d59cb4 !important;
text-decoration: underline;
}

.submenu .menu li a:hover{
color:#d59cb4 !important;
text-decoration: underline;
}

.submenu .menu li.current-menu-parent a, .submenu .menu li.current-menu-parent a:hover{
color:#d59cb4 !important;
text-decoration: underline;
}

however this solution requires a "custom menu" (you can build it with the menu manager - Appearance > Menus).

Posted 1 year ago #

colorit2
Member

Thanks, but what do you mean with "custom menu"?

I already have two menu made with the menu manager:

http://i39.tinypic.com/2jb70ht.jpg

and this is the head of my site (still offline):

http://i42.tinypic.com/b7xglv.jpg

I've used your code above, but it doesn't work. Have I misunderstood something?

Posted 1 year ago #
colorit2
Member

Ok, I got it ... I have just copy&paste your code and have not seen, that there is a "hover" in it; I changed it to "active" and then ... tatatataaaa ... it works like a charm!

Thanks, Dude!

Posted 1 year ago #
Dude
Dude

Glad that it works now :)

Posted 1 year ago #
vibeGirl
Member

Dude, I have added your initial CSS code to custom.css in order to change the active link color but it's not working for me. I tested in a different browser to be sure it's not a cache thing... but the active link is still showing as the secondary color.

Would you take a look to see what I might be missing?

The site is at: http://liga.ca/

Thanks!
Heather

Posted 1 year ago #