Grow your CSS skills. Land your dream job.

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 {
    color:#FFFEF2;
    }

    # March 17, 2013 at 10:00 pm

    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

    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

    !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 {
    color:#FFFEF2;
    }

    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

    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.

*May or may not contain any actual "CSS" or "Tricks".