DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON

[csteienr]

Hi

I am using Xara Designer Pro X17. I have built a Navigation Bar for a web page which displays a different color on hover. What I am trying to achieve is for the active button to display a different colour to the hover colour. For instance, the main colour on the Nav Bar is Blue which changes to a lighter blue on hover. But what I would like is for the active button to display black background with white text.

Can this be done with custom CSS. And if so, can anyone tell me how to do it?

Many thanks for your help.

Christian

[Acorn]

Just create a button with no link in your colours and overlay it on the active button.

Acorn

[csteienr]

Hi

Many thanks for your speedy reply but I'm not sure that I understand what you mean.

Do I have to create an overlay button for each button on the nav bar?

Sorry if I appear a bit thick but I've always used Wordpress with Elementor page builder before and for which there is a setting for the active button display colour.

Regards

Christian

[gwpriester]

Acorn - Can you create a simple Xara document with this effect?

Something not right happening on your home page.

[Acorn]

Christain, yes it is an overlay approach - quick and dirty, but simple.
Clone your NavBar and open for edit.
Delete the MouseOver parts and unlink it all.
Resize each button to cover its parent.
Place each over their parent on the parent page.

Xara - Buttons on a NavBar.xar

Acorn

[csteienr]

Many thanks for your help. It is much appreciated.

Xara Designer Pro is a fantastic piece of software but I think the web designer is badly let down by the navigation bar element. I think it needs a makeover urgently.