CODEWITHSUNDEEP
phpcsswordpress
robert0
robert0

Reputation: 445

Change CSS style according to URL

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:

enter image description here

Any kind of help would be appreciated.

Thanks.

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

Upvotes: 0

Views: 121

Answers (1)

julien.giband
julien.giband

Reputation: 2619

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/

Upvotes: 2

Related Questions