The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Current Navigational Highlighting #2

  • # March 17, 2013 at 5:58 pm

    My previous thread is a bit convoluted due to my ramblings. I heavily thank @AlenAbdula and @TheDoc for their wonderful help though. With @AlenAbdula‘s suggestion, I added theme support for menus in Starkers v4.0 and then I promptly placed my menu in my header.php file. To see a current version of my code, visit this CodePen. You will notice something though if you look at the code closely. “Shop” should be highlighted, because it is the only page with a class of current-menu-item and I specifically call out that class in my CSS with this:

    .current-menu-item {
    color: #FFFEF2;

    This should highlight “Shop” in particular. Or any page that has that class. So, my question is, how do I fix it? @AlenAbdula has a working CodePen, here, using the same method. What am I doing wrong? Thank you in advance!

    # March 17, 2013 at 9:15 pm

    Try this.

    .current-menu-item a {
    color:#FFFEF2 !important

    # March 17, 2013 at 9:57 pm

    No need to use !important (which I personally try to avoid like the plague if I can help it) if you use this line:

    .menu-navigation-container ul li.current-menu-item a {

    # March 17, 2013 at 10:00 pm

    This reply has been reported for inappropriate content.

    Okay, that works. Question: I tried targeting .current-menu-item a without using !important and it didn’t work. How does !important change it? Thank you for the tip!

    Edit: Thank you, @Senff.

    # March 24, 2013 at 5:57 pm

    This reply has been reported for inappropriate content.

    Okay, one more question about current navigational highlighting and then my menu will be finished! I created a fork of my original CodePen, this time with Leaflet highlighted (you have to scroll over Projects to see it in the sub-menu). So, my question is: how do I highlight Projects when one of the child pages is selected? I want people to know that they are looking at Leaflet, which is within Projects. Same thing goes for Feel Good Candy. Thank you in advance!

    Edit #1: I really just do not know what to target. I figure there is some way to target the parent of an ul chain, but I am not sure. Thanks again!

    # March 25, 2013 at 3:19 am

    This reply has been reported for inappropriate content.

    !important means “No matter what any other rules say, do what I say”.

    To get the parent of a submenu to light up, you’d use either of these classes: current-menu-ancestor current-menu-parent

    So, for instance, change your current menu style to the following:

    .menu-navigation-container ul li.current-menu-item a,
    .menu-navigation-container ul li.current-menu-parent > a {

    The > a is to ensure it’s just the direct a-child of the current-menu-parent that gets lit up, and not the submenu itself.

    # March 25, 2013 at 1:56 pm

    This reply has been reported for inappropriate content.

    Helpful and informative! That makes perfect sense. Thank you so much, @Melindrea. The drama that is menu-making is complete!

    # March 25, 2013 at 3:12 pm

    Glad everything is working for ya. Is this ready to be marked as solved once and for all :)

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed