Navigation buttons do not zoom properly when previewing page

[techenthused73]

The downfall of Xara's approach to a Navigation Bar is all the buttons end up as images.
I use CCS as this transforms fonts and boxes without introducing images needlessly.

Play with http://www.cssportal.com/css3-menu-generator/ and zoom to 500% in Chrome or 10000% in Edge to see what I mean.

Acorn

https://www.irs.gov/

[letsgofishing]

That's really useful Acorn - where do you place the CSS or HTML code in WDP to get the menu bar - in a placeholder?

[Egg Bramhill]

Hi LGF, place the css code in the Web Properties / Page / Head code. You need to add <style> and </style> tags at the start end of the supplied css. Apply.

Then create a rectangle on the page & select it Web Properties / Placeholder / Body code and paste in the supplied html code. Apply.

[siran]

You can also cheat and add the following to the website html code to force the high resolution images to be displayed:

<script>
xr_htm_orig=xr_htm;
xr_htm=function(){var o=xr_autoscale;xr_autoscale=true;xr_htm_orig();xr_autoscale=o;};
</script>

This requires to set the retina option explained by Gary in post 8.
And if you are familiar with the registry you can also increase the resolution that Xara uses to export high resolution images. (Although this will increases file sizes and loading times.)
You can find the key in HKEY_CURRENT_USER\Software\<Optional Wow6432Node if you have installed 32 Bit Xara on 64 Bit Windows>\Xara\<your product>\<version>\Options\Filters\HTMLHiResBitmap Dpi.

[Egg Bramhill]

Good tip Siran.

[Acorn]

You can also cheat and add the following to the website html code to force the high resolution images to be displayed:

<script>
xr_htm_orig=xr_htm;
xr_htm=function(){var o=xr_autoscale;xr_autoscale=true;xr_htm_orig();xr_autoscale=o;};
</script>

This requires to set the retina option explained by Gary in post 8.
And if you are familiar with the registry you can also increase the resolution that Xara uses to export high resolution images. (Although this will increases file sizes and loading times.)
You can find the key in HKEY_CURRENT_USER\Software\<Optional Wow6432Node if you have installed 32 Bit Xara on 64 Bit Windows>\Xara\<your product>\<version>\Options\Filters\HTMLHiResBitmap Dpi.

Cheers siran, that is really useful,
Acorn

[letsgofishing]

Hi LGF, place the css code in the Web Properties / Page / Head code. You need to add <style> and </style> tags at the start end of the supplied css. Apply.

Then create a rectangle on the page & select it Web Properties / Placeholder / Body code and paste in the supplied html code. Apply.

Thanks for that Egg!
Is there any way to make the button behind each menu item a solid colour rather than a grad? - can't see anywhere to change it on the site...

[siran]

Happy to hear that it seems to be of use.

[Acorn]

Thanks for that Egg!
Is there any way to make the button behind each menu item a solid colour rather than a grad? - can't see anywhere to change it on the site...

Menu Options > Menu Bar > Background: tick Solid Background
Menu Options > Top Menu Hover > Background: tick Solid Background
Menu Options > Sub Menu > Background: tick Solid Background
Menu Options > Sub Menu Hover > Background: tick Solid Background

Acorn

[letsgofishing]

Almost there but not quite - I've set all the background colours to solid and the shadow colours to white and shadow lengths to zero, but there's a rectangular "box" behind each menu button that casts a small shadow below it.