Highlighting items from dropdown menu list

19 posts from 3 voices

• Started 1 year ago by rumblefish
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   rumblefish
   Member

   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!

   Posted 1 year ago #
2. 

   Dude
   Dude

   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.

   Posted 1 year ago #
3. 

   rumblefish
   Member

   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

   Posted 1 year ago #
4. 

   rumblefish
   Member

   Here is the link:

   http://sos.cameratruck.es

   Thanks, dude!

   Posted 1 year ago #
5. 

   Dude
   Dude

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

   Posted 1 year ago #
6. 

   rumblefish
   Member

   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.

   Posted 1 year ago #
7. 

   Dude
   Dude

   Try:
   

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

   Posted 1 year ago #
8. 

   rumblefish
   Member

   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?

   Posted 1 year ago #
9. 

   Chris Beard
   

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

   Posted 1 year ago #
10. 

    rumblefish
    Member

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

    Posted 1 year ago #
11. 

    Dude
    Dude

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

    Posted 1 year ago #
12. 

    rumblefish
    Member

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

    Posted 1 year ago #
13. 

    Dude
    Dude

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

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

    to highlight the current item.

    Posted 1 year ago #
14. 

    rumblefish
    Member

    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.

    Posted 1 year ago #
15. 

    Dude
    Dude

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

    Posted 1 year ago #
16. 

    rumblefish
    Member

    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.

    Posted 1 year ago #
17. 

    Dude
    Dude

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

    Posted 1 year ago #
18. 

    rumblefish
    Member

    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)

    Posted 1 year ago #
19. 

    Dude
    Dude

    Finally we got it :)

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.