[Resolved] strange behaviour of menu item top border

[Christoph]

I have added this CSS to my secondary navigation menu:

 .secondary-navigation .current-menu-item {
	border-top: 3px solid #b0cee8;
}

It adds a little line to the top of the current menu item. And it works as expected. The problem is that the hover pseudo class for the non-current menu-items seems to inherit that top border (but not the colour), which makes absolutely no sense.

In practice, this means that hovering over the menu items will change their colour except for the to border. Like this:

In the screenshot, Home is the current menu item which works as it should and Forum is being hovered over. What I would expect is that there is no dark blue border at the top of the Forum item.

It is a mystery to me, how my custom CSS code can affect the hover effect of an entirely different item. What am I missing?

I am obviously getting something completely wrong because even my emergency hack doesn’t fix this:

.secondary-navigation .menu-item {
	border-top: 0px;
}

I might add as a second question:

How do I set the menu colour for “Background Current Hover”? You are providing a setting for “Background Current” and “Background Hover” but there is no setting for “Background Current Hover”. The easiest way to fix that might be to give “Background Hover” priority over “Background Current” so that the hover effect works for all menu items, regardless of state, but that may not always be desired. In my case, the issue is with a dropdown menu. When the top item of the dropdown menu is the current page and you open the drop down menu, the background of the dropdown has the “Background Current” colour (perhaps because the items shown are all anchors on the same page) and that is fine but the problem is that the hover over effect is not working on those items. That’s where I need the “Background Current Hover” setting.

[Christoph]

Okay, it is beginning to dawn on me that borderactually adds pixels to the element, in this case making the menu bar 3 pixels higher. But I still can’t figure out how I can make the border of the menu items be styled the same way as the item itself.

[Tom]

You can use an inset box shadow instead: box-shadow: 0 3px 0 red inset;

[Christoph]

Thanks, that was one of the things I tried but it didn’t work. I couldn’t get the shadow to show up inside the box. It seemed like it was always under the box.

[Tom]

Is it working now? 🙂

[Christoph]

Hm?

This works (but with the caveat described in the OP):

nav#secondary-navigation .current-menu-item {
	border-top: 3px solid #b0cee8;
}

This doesn’t:

nav#secondary-navigation .current-menu-item {
	box-shadow: 0 3px 0 red inset;
} 

[Tom]

This would be your CSS:

#site-navigation .main-nav > ul > li.current-menu-item > a {
	box-shadow: 0 3px 0 red inset;
} 

[Christoph]

I added your snippet to my CSS but with no effect. It looks like your selector is wrong because when I use the browser inspector to check the CSS for that element, it doesn’t even have the box-shadow attribute set.

Speaking more generally, it doesn’t seem logical to me that changing the selector would solve the problem because my selector (nav#secondary-navigation .current-menu-item) is working. What’s not working is the box-shadow attribute.

[Tom]

Can you add my CSS and then link me to the page where it should be working?

[Christoph]

Your CSS is added and the page is kunsido[dot]net

[Tom]

You still have this CSS that you’ll need to remove:

nav#secondary-navigation .current-menu-item {
    border-top: 3px solid #b0cee8;
}

Then adjust mine to work with the secondary nav:

#secondary-navigation .main-nav > ul > li.current-menu-item > a {
	box-shadow: 0 3px 0 #b0cee8 inset;
} 

And here’s the result: https://www.screencast.com/t/CaZ9iN3f

[Christoph]

Thanks a lot. Now it works. If you don’t mind, could you explain why nav#secondary-navigation .current-menu-item works to add the border but not the inner shadow?

[Tom]

It might, my CSS just makes sure it’s adds it to the top level menu items and not drop down menu items.

[Christoph]

Well, it doesn’t, that’s the thing. Granted that your selector is more fail-proof, but that’s not what I’m wondering about. It’s that it works to make one modification but not another.

The way I understood CSS works is that you target an element in step 1 and then, in step 2, you modify it. So if you’re holding the thing in your hand, as it were, after step 1, then it doesn’t matter what selector you used to catch it, right? But apparently that’s not the case…

Anyway, thanks for your patience and help.

[Tom]

All my CSS does is target the first level of list items – the top level menu items.

Your CSS will work as well, it will just target every element with that class inside the secondary navigation, including sub-menu items.

Totally up to you which one you use 🙂

[Author]

Posts