[Resolved] Would Like To Make Current Menu Item More Distinct

[Mary Pearson]

I have two sub-domains of my website at https://plantbest.com/ca/ and https://plantbest.com/us/

The client wants flags instead of text to designate Canada and U.S.

I have created the flags and used them in the menu but it still isn’t really clear which site you’re on, so I would like to do something to indicate current page, like box shadow.

I am open to suggestions. Box shadow was just one that I thought of. I just want to make the current menu item stand out in some way so that it is obvious if they are on the Canadian or the U.S. site.

Many thanks!

[Tom]

Right now it looks like the background behind the flag turns green.

For your specific case, you could try something like this:

.current-menu-item .hovered-image {
    margin: 0 !important;
    opacity: 1 !important;
}

[Mary Pearson]

Thanks Tom. That gives a double image of the flag. On the U.S. page it shows two U.S. flags. On the Canadian page it shows two Canadian flags.

(I’ve removed the code for now since it’s a live site).

[Tom]

Hmm, I tested it and didn’t see any issues. Maybe there was a caching issue?

Either way, the way you currently have it set up means you need to show the “hovered” image when .current-menu-item exists.

This method of switching out images on hover is pretty old-school though.

[Mary Pearson]

What is “new school”?

[Tom]

I would probably just apply a border or shadow to the original image when it’s current – the shadow wouldn’t be inside the image as it is now though.

[Mary Pearson]

I think I understand. You are saying that it should be done with CSS instead of an image?

[Tom]

That would be ideal, but if you want the current look (shadow inside the image), then the way you’re doing it is probably best.

[Mary Pearson]

I’m not sold on the way it looks now.

I’ll try it with CSS. Thank you.

[Tom]

No problem 🙂

[Mary Pearson]

Thanks for the advice Tom. It looks much better your way. 😉

[Author]

Posts