DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
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
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
Just create a button with no link in your colours and overlay it on the active button.
Acorn
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
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
1 Attachment(s)
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
Acorn - Can you create a simple Xara document with this effect?
Something not right happening on your home page.
1 Attachment(s)
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
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.
:pointAttachment 126812
Acorn
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
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.
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
Quote:
Originally Posted by
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.
Which is why I stopped using them way back. I use CSS.
Acorn
1 Attachment(s)
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
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.
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
Quote:
Originally Posted by
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.
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
Re: DISPLAY DIFFERENT COLOUR ON ACTIVE NAV BAR BUTTON
True. But is also becomes the active page button. Though as I pointed out, only on first level pages.