[Support request] Primary Navigation Current Page Highlighting

Home Forums Support Primary Navigation Current Page Highlighting

This topic contains 16 replies, has 3 voices, and was last updated by  Tom 6 days ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1046311

    Conor

    Hi!

    I’m looking to make model my primary navigation off of lifehacker.com ‘s primary navigation.

    To do this, as I see it, two things need to change.

    1) I need the background of the current selected page on the primary navigation to only highlight around the text. At the moment, it highlights blue the whole box of that button’s spot on the primary navigation. In other words, when I am on the home page, the “home” button on my primary navigation is highlighted blue, but it isn’t just around the text that is highlighted blue, I have blue highlighted to the left and right of the text.

    2) I need to take away the padding on the left ( on my site, left of the home button) and the right ( on my site this is the search bar ) of the primary navigation.

    Cheers,
    C

    #1046507

    David Customer Support

    Hi there,

    1. You can change the current background and current text color in Customizer > Colors > Primary Navigation.

    2. Try this CSS:

    @media(min-width: 1024px) {
        .main-navigation .main-nav > ul > li:first-child a {
            margin-left: -21px;
        }
        .main-navigation .main-nav > ul > li:last-child a {
            margin-right: -14px;
        }
    }
    #1046630

    Conor

    Hi David,

    Thanks for the reply.

    The code works, but I still need help changing how much is highlighted blue behind my primary navigation buttons.

    To be clear, I am not trying to change the color of the background behind the text, I am just trying to make the area it highlights less. Instead of it highlighting the whole link box, I want it so it just highlights link box behind where there is text with maybe a pixel of padding above and below. Like it does on lifehacker.com

    Right now, It highlights a very large area behind the text. For example, on my site, it highlights an inch to left and right of the home button when I am on that page. So, now that I have added the code, it highlights an inch of blue past the left margin of my website.

    Can this highlight box be made smaller?

    C

    #1046637

    Conor

    Also,

    Because of the new code, the top link in each of my drop down menus has been shifted to the left. This isn’t good because it makes it look like that top link is some sort of parent link in my drop down menu.

    C

    #1046654

    David Customer Support

    I adjusted the code above to correct the submenu issue.
    I am little confused. The lifehacker site doesn’t have a background color for the menu items, maybe its different on .com ( i am UK based so it force redirects me to the UK site ). They just have a solid nav background and only text color is changed on hover.

    We can strip off the left right padding from the menu items. But this will severely reduce the clickable area of the menu items.. let me know

    #1046710

    Conor

    Hi David,

    I can’t send the screenshot of lifehacker for you to see, but yes I am looking at lifehacker.com.

    I would be willing to strip the left and right padding off the menu items, but since each menu item is a different length, we may have problems just taking a static amount of padding off. I believe when I try to do that in the customizer it makes it so the menu items overlap, and this looks horrible.

    To be honest, to get the background highlight to look the way I like it, I have already taken away too much padding from above and below the navigator, and now I find the primary navigator to close to the content below. I was hoping there would be css to just highlight behind the text of the chosen navigation link and then I could go back to adding a propper amount of padding.

    #1046924

    David Customer Support

    Hmm.. you can try adding this PHP Snippet – it will wrap the Primary Nav menu labels in a Span tag and give it a custom class that you use to style:

    add_filter('nav_menu_item_args', function ($args, $item, $depth) {
        if ($args->theme_location == 'primary') {
            $title             = apply_filters('the_title', $item->title, $item->ID);
            $args->link_before = '<span class="menu-label">';
            $args->link_after  = '</span>';
        }
        return $args;
    }, 10, 3);

    Then this CSS:

    .main-navigation ul li.current-menu-item .menu-label {
        background-color: blue;
    }
    #1046939

    Conor

    Hi david,

    This worked well. But, I want to add one thing, and just to be on the safe side with using PHP, I don’t want to fool around with it myself.

    Could I add a little padding to the left and right of menu-label. I just want the blue highlight to go to the left and right of the menu label a little bit.

    Cheers,
    C

    #1046941

    Conor

    ** sorry, could I add a little padding to the left, right, up, and down? Is there a way I could control how much blue there is on all sides of the menu label.

    C

    #1046955

    David Customer Support

    You can add some padding to all of the menu-labels:

    .menu-label {
        padding-left: 5px;
        padding-right: 5px;
    }
    #1056347

    Conor

    Hi David,

    I am just noticing that whenever I click on one of the sub menu pages – anything under the topics or grade specific drop downs, that the the parent of the drop down menus goes completely white.

    If you go on my site, and click on any of the sub menu pages – the k-2 page for example, you will see what I mean.

    Everything is looking great otherwise,
    C

    #1056355

    Conor

    Also, when I click on one of the pages that is the top of the dropdown menu, all of the iteams in the dropdown menu get highlighted.

    C

    #1056505

    Tom Lead Developer

    Hi there,

    Can you make sure your current menu item text color isn’t set to white in the Customizer?

    Let me know 🙂

    #1057270

    Conor

    Hi Tom,

    It is set to white, but it needs to be to get the desired aesthetic. I think the issue is that the php code we added is selecting the menu and all of its dropdown items as one thing, because when I am on the page that is the parent in the dropdown menu, it highlights all of the items in the sub menu. And then, when I am on a sub-menu page, it makes that sub-menu’s page text white in the menu, but it also makes the parent text white as well.

    Check out my site and play around with the dropdown menus. Click on the pages and you will see what I mean.

    Cheers,
    C

    #1057422

    Tom Lead Developer

    Try this CSS instead:

    .main-navigation ul li[class*="current-menu-"] .menu-label {
        background-color: blue;
    }

    Let me know 🙂

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.