Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #6353

    Hey,

    I’m trying to highlight some elements in the main menu and it’s dropdowns to help with navigation.

    I managed to get the rollover of the main menu text to highlight, the rollover of the dropdown items to highlight, the parent of the dropdowns (the original main menu link) to stay highlighted once the page is clicked, but I can’t get individual dropdown menu items to stay highlighted once clicked. What happens is that ALL the items in the drop down menu are highlighted.

    This is the css I am using. Obviously something isn’t right or is missing. Any ideas?

    /* MAIN MENU HIGHLIGHT HOVER */

    .main_menu a:hover {font-weight: bold; color:#a16d28;}

    /* MAIN MENU HIGHLIGHT ACTIVE TAB */

    .current-menu-item a, .current-menu-parent a {color:#a16d28;}

    Thanks!

    #53856

    Hey,

    I think you need to exclude the submenu items from the current parent definition. Try:

    .current-menu-parent ul.submenu li a {color:#a16d28;}

    and instead of #a16d28 fill in the standard (non highlighted) menu link color.

    #53857

    Hey dude,

    It didn’t work. Give me a few minutes and I’ll put the site up again so you can see it. It’s probably easier.

    I need the main menu parent to highlight when a main menu link is opened to a page (but not all the submenu items). I also need the main menu parent to highlight when a submenu link is opened to a page. And I also want that particular submenu item highlighted too.

    This is all the menu code I have so far:

    /* MAIN MENU FONTS */

    .main_menu a {

    font-weight: bold;

    color: #888888;

    }

    .main_menu a:hover {

    font-weight: bold;

    color:#444444;

    }

    /* MAIN MENU HIGHLIGHT ACTIVE TAB */

    .current-menu-item a {

    color: #444444;

    }

    .current-menu-parent ul.submenu li a {

    color:#888888;

    }

    Thanks, rich

    #53858

    Here is the link:

    http://sos.cameratruck.es

    Thanks, dude!

    #53859

    Please try:

    /* MAIN MENU FONTS */
    .main_menu a {
    font-weight: bold;
    color: #888888;
    }

    .main_menu a:hover {
    font-weight: bold;
    color:#444444;
    }

    /* MAIN MENU HIGHLIGHT ACTIVE TAB */
    .current-menu-item a {
    color: #444444;
    }

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

    .current-menu-parent ul.submenu li a {
    color:#888888;
    }

    #53860

    Hi dude,

    Thanks. It kind of works. The problem is that ALL the sub menu items are highlighted, not just the one selected. The parent menu part works ok though.

    #53861

    Try:

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

    li.current-menu-parent .submenu li a {
    color:#888888 !important;
    }

    #53862

    I’m afraid it’s still the same. The submenu items always stay highlighted. :O/

    By the way, what’s the difference between current-menu-parent and current-menu-ancestor?

    #53863

    Hey,

    try

    .current_page_item a {
    color: #ff0099 !important;
    }

    This will change the highlight color – of course you can change the hex color code.

    Parents are in direct relation to the item, ancestors should be parents of parents (.. of parents .. of parents..).

    #53864

    This is driving me nuts!

    That didn’t work either Chris. I took out all the custom.css except for:

    /* MAIN MENU FONTS */

    .main_menu a {

    font-weight: bold;

    color: #888888;

    }

    .main_menu a:hover {

    font-weight: bold;

    color:#444444;

    }

    which gives me the correct hovering behaviour over the menus and submenus. The only thing that seems to work right.

    Then I tried adding in:

    .current_page_item a {

    color: #ff0099 !important;

    }

    but that had the same effect as

    .current-menu-item a {

    color: #ff0099;

    }

    This is what happens:

    When the main menu item is clicked it highlights, but so do ALL the submenu items. I don’t understand why that should happen. But the main menu item at least stays highlighted after the click (which is what I need). If you go back to that same menu the submenu items are still all highlighted as before.

    If only a submenu item is clicked, that highlights and remains highlighted (although hidden when the menu collapses), which again is what I want. However in this case the main menu item does not remain highlighted. That I guess could be fixed using a parent command.

    I need to reupload the site with some changes I made. The only menu custom.css it has now is:

    /* MAIN MENU FONTS */

    .main_menu a {

    font-weight: bold;

    color: #888888;

    }

    .main_menu a:hover {

    font-weight: bold;

    color:#444444;

    }

    .current_page_item a {

    color: #ff0099 !important;

    }

    #53865

    Try:

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

    #53866

    Oooooooooo! So close!

    The only thing that doesn’t work now is when you click on the main menu item by itself. It doesn’t stay highlighted. If you click a submenu item, they both are highlighted which is good.

    (The colors are round the other way, but that’s a minor thing)

    I just uploaded the new fix so you can see…

    #53867

    Yes – you need to use my code in addition to yours – so use:

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

    to highlight the current item.

    #53868

    Sorry dude, that last bit doesn’t quite work. It makes the main menu item highlight, but it also makes all the submenu ones highlight too.

    #53869

    Maybe try to but this line before the lines I posted above. I did test the combination:

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

    and it works for me. I see no reason why .current-menu-item a would overwrite rules which are more specific and set to important. Maybe you need to test a bit (i.e. like highlight color to li.current-menu-item a , standard color to li.current-menu-item ul li a , etc.).

    #53870

    Hey dude, I did try that. Maybe you are not understanding what I mean.

    The standard default color should be the #777777 (mid grey), the highlight should be the #4444444 (dark grey)

    Try this:

    http://sos.cameratruck.es

    Click the menu item SOS Galgos. The Item highlights (dark grey) once the page is opened. If you go back to that menu, all the submenu items are highlighted (dark grey).

    Now if you click on a submenu item in the SOS Galgos main menu, say Objetivos, the page opens, the main menu item is highlighted, but if you go back to the submenu, only the Objetivos item is highlighted. That is great, that is how it should be.

    There is a problem with only that first part.

    #53871

    I understand what you’re trying to achieve but the code above does what you want. Last solution I can think of is following code line:

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

    instead of:

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

    #53872

    GIVE THAT MAN A PAY RISE!!

    You Sir, are a f@!*ing genius!

    It works now – all of it!

    Thank you so, so much for all your help!

    The Dude rocks.

    :O)

    #53873

    Finally we got it :)

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

The topic ‘Highlighting items from dropdown menu list’ is closed to new replies.