Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #6900

    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.

    #55833

    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 */
    }

    #55834

    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!

    #55835

    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).

    #55836

    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?

    #55837

    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!

    #55838

    Glad that it works now :)

    #55839

    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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Main menu items active while on child and grandchild pages’ is closed to new replies.