Change CSS style according to URL

Question

I have looked everywhere, but couldn't found a simple solution.

CSS would be best.

Basically I want to change the link css style according to the URL.

So, let's say, there are three menu items:

HOME ( https://www.example.com )

PRODUCTS ( https://www.example.com/products )

SERVICES ( https://www.example.com/services )

I want that, when a visitor is ON https://www.example.com , the HOME link would be Blue.

All other - black.

When on /products, then PRODUCTS would be in blue and all others (HOME and SERVICES) in black.

Example below:

Any kind of help would be appreciated.

Thanks.

PS not on hover, but when a visitor is on the specific URL.

Answer 1

You should use Wordpress' menu system.

In that case, the active menu item will automatically be marked with class current-menu-item

Then you'll be able to style it differently than others with css

Detailed information on how to declare a custom menu area in your WordPress theme https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/