Gap Between Footer & Browser Window

[Initiostar]

Point 3:

Do away with the drop down navbar all together and look at an alternative means of directing visitors around your website on the mobile variant. This is the option I will be going with

A simple, easy to manage option is to create a Mobile Menu Page, similar to the image below. In this example, your hamburger which is sticky on all pages, links to a menu page, which can be a standard Xara Navbar, or individual buttons.



The attached XAR gives you a demo of different options, the menu page and a working drop down menu.

Not sure the issues highlighted in your Points 1 & 2 hold true, but the above menu page option is easy to implement and manage.

[Acorn]

Thanks for feeding back the issue and solution. In hindsight, it is obvious as the Main and Variant are in the same file.

More justification for Xara to wake up, smell the coffee, and sort out the NavBar legacy and a better separate of Variants.

Acorn

[paul.ibbitson]

Initiostar, I like the idea of a menu page for the mobile variant. I will certainly look at that as an option. Thank you.

[Initiostar]

It could look something like this:



Simple XAR 480px width attached for you to play with.

[paul.ibbitson]

Thanks for feeding back the issue and solution. In hindsight, it is obvious as the Main and Variant are in the same file.

More justification for Xara to wake up, smell the coffee, and sort out the NavBar legacy and a better separate of Variants.

Acorn

I agree, I suppose that it will cause conflicts between the two variants if they reside in the same file. I am not knowledgeable enough to know if this can be any different on any other platform or if all platforms work in this way. Anyway, I like Xara for the ease and speed of use so I guess its 6 to some and half a dozen to the rest.

[Initiostar]

I suppose that it will cause conflicts between the two variants if they reside in the same file.

I have lots of sites using the mobile menu approach and have no issues. The mobile menu page will show in the page and layer gallery for all variants, but your desktop menu should not have a link to it. For completeness ensure that the desktop variant of the mobile menu page does have your main menus visible. A simple test to see what happens across all variants is to squeeze your browser width until you see the mobile variant appear. It is unlikely a visitor using a desktop will hit the mobile menu page (assuming you do not have a link to it), but were they to do so, they should see your main menus. I am also using dropdown menus on other sites without any issues too.

[paul.ibbitson]

I have now removed the drop down completely from the mobile variant and replaced it with a single button that links to a menu page as you suggested and it works a treat. There are no longer any gaps at the bottom which was my main gripe and it actually makes it easier to navigate the mobile version. I have not linked through to the menu page on desktop version so that shouldn't hinder my visitors to much. Ill just put a button on that page linking back to the mobile version of the menu just in case.
I have only implemented it on the main 4 pages of the website and will implement it across the entire website either tonight or tomorrow.
Thank you so much for the menu page idea.

Home Menu Button / Menu Page / No gap at bottom

[Initiostar]

Well done Paul; best to remove your submenus under 'Setup & Imaging' & 'Astro Gallery'. The two tabs in Setup and Imaging could be combined and the Astro submenu could sit on the Astro page. You could also consider making the Astro page a separate doc (in the same directory). The Xara NavBar submenu structure is primitive and best avoided. This way the menu structure is consistent across both variants.