How to create simple navbar with no mouseover and an underline on selected button?

[Initiostar]

I have this underline on my main website https://initiostar.co.uk/ and use a standard Xara button (two groups soft-grouped together).

I tried the simpler version keeping the button rectangles as a named colour (that way the page & pasteboard background can stay in sync). In my case, I also used (and use) a name for the left-justified text, "htmltext", to ensure that text-stays-as text (no blurring at higher resolutions).

https://initiostar.co.uk/demo/NavBarLine/index.htm === Nav Bar (1).xar. The Navabar underline matches the lenght of the label automatically and you could ungroup the Navbar and change the first and last line colour.

Gary

[Acorn]

@Gary - no spurious happenings.
@Egg - no issues. The design file, however, is a bust.
@eselick - I took your original ask at face value.

You do not seem to need a Xara NavBar with sub-menus.
You do not need a rollover so no need for MouseOver/MouseDown actions.

This follows Egg's idea of there being a visible indication that you are on a link: CSS - Simple NavBar.xar.

If you do not want this, delete the website HTML Code (head) CSS.
The red boxes and the rest are as I described in Post#3.

Acorn

[Egg Bramhill]

@Egg - no issues. The design file, however, is a bust.

Not following you here Acorn.

[eselick]

Hi again. Thanks for that. I'm almost there, but when I resize the button rectangles, the lines are made proportionally smaller. I've tried to insert an image to show this, but the insert image button doesn't seem to work. In any case, why wouldn't I want to simply underline the text in the mousedown layer?

[eselick]

I tried underlining the text in the mouse down layer but the underlines appeared on all the layers. I'm not sure why that is the case but I decided to just select the individual line objects and sized them to the same length as the text. So all is good and my problem is solved. Thanks for the help.

[eselick]

eselick - As long as all buttons are same size, then you should be able to resize the individual button rectangles.

I did it in my sample file by making sure all three button states are visible then Ctrl clicking on the first button shape (which is the MouseDown), then the next button shape, Mouse Over and then finally MouseOff. But you have to select the buttons shape rectangles on at a time.

Egg - Works for me in Firefox.

Thanks for that. I've gotten it to an acceptable state. One last question. Your sample xar file has a mousedown layer; how does one add this layer to an existing template that doesn't have one?

[gwpriester]

In the Page & Layer Gallery > Layer, click New Layer. Name the new layer MouseDown. This button state will now be used to indicate the current selected page.

Caveat. If you have sub-menus the sub menu pages will not reflect the current page.

[eselick]

Thanks

[Acorn]

Not following you here Acorn.

Egg, your index.xar file opens to a Placeholder with body:

<object type="image/svg+xml" data="/svg/button-2.svg" " width="100%" height = "100%"></object>

You have not supplied the SVG.

Running it do not present the button.
When I tracked the SVG down from your site link, it rendered but did not show any hover effect on the rendered page.

I have to be careful when you name your design files index.xar, lest I overwrite any of the ones you have presented earlier.
index is about the worst possible name for a design file as if you save it as this, it overwrites any previously named index.xar file.
Novice users get confused with the published index.htm web page output and think the design file has to have the same name.

Acorn