[Support request] Primary Navigation Current Page Highlighting

[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

[David]

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

[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

[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

[David]

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

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

[David]

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

[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

[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

[David]

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

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

[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

[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

[Tom]

Hi there,

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

Let me know 🙂

[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

[Tom]

Try this CSS instead:

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

Let me know 🙂

[Author]

Posts