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.

[Acorn]

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.

Which is why I stopped using them way back. I use CSS.

Acorn

[gwpriester]

Also, you can create a new layer, name it MouseDown and make sure this layer is on top of the MouseOff and MouseOver layers.

Create a third button state. This will be the button that shows on the current page.

This only works however with first level pages and not with sub menu options. Someday, perhaps long after I have left this earth, Xara may address this. But I am not holding my breath.

[Acorn]

Also, you can create a new layer, name it MouseDown and make sure this layer is on top of the MouseOff and MouseOver layers.
Create a third button state. This will be the button that shows on the current page.
This only works however with first level pages and not with sub menu options. Someday, perhaps long after I have left this earth, Xara may address this. But I am not holding my breath.

Gary, i have always assumed that the MouseDown state is what you get when you click on or hold a button.The Xara Help isn't.

Acorn

[gwpriester]

True. But is also becomes the active page button. Though as I pointed out, only on first level pages.