Mobile Drop Down Menu Stays Visible with Anchor Links

[oranda]

Software Used: Xara Designer Pro X 16

Hello,

I have used a Xara pre-built navigation bar for a one page website (the camera template page). This is an issue with the mobile version of the page and its rollover menu.

All the links on the drop down navigation bar obviously go to an anchor link on the same page due to it being a one page site. The problem is that when the menu anchor link is clicked the drop down menu stays on screen until a part of the screen is clicked to make it disappear.

Am I missing a setting to make the popup navigation disappear? I have tested other templates and the issue is the same. The menu will always stay visible when a link is clicked that keeps the viewer on the same page.

Thanks for any guidance.

[Acorn]

Software Used: Xara Designer Pro X 16
Hello, I have used a Xara pre-built navigation bar for a one page website (the camera template page). This is an issue with the mobile version of the page and its rollover menu.
All the links on the drop down navigation bar obviously go to an anchor link on the same page due to it being a one page site. The problem is that when the menu anchor link is clicked the drop down menu stays on screen until a part of the screen is clicked to make it disappear.
Am I missing a setting to make the popup navigation disappear? I have tested other templates and the issue is the same. The menu will always stay visible when a link is clicked that keeps the viewer on the same page.
Thanks for any guidance.

oranda, welcome to TalkGraphics.

In passing, you can simply move off the NavBar and it closes for a desktop browser..

The Xara styling is rather brutal and large.

I dropped the font size, border and spacing.
I changed the Animation to Medium.
The best improvement, in my opinion, was changing the Transparency to 35%.

All together, these ensure the site content is visible and you have the "encouragement" to move the pointer off the menu or click elsewhere, without being too distracting.

Xara's NavBars were designed well before mobile, which is another reason to use CSS NavBars instead.

Acorn

[oranda]

Thank you for your reply.

I am new to Xara web design, just started playing around with it this week, so am stumbling across features / ways around things.

It is a shame that the mobile version of a rollover menu will sit there and won't close upon clicking an anchor link on the same page; I was concerned I was doing something wrong.

[Acorn]

oranda, as you are new, you may be open to alternatives.

I would avoid a Xara NavBar on a mobile page as the navigation is simple enough for buttons alone.

I have an example for you: Simple Mobile Navbar.xar.

The construction is simple but daunting first time round.

1. I put Soft-Grouped "buttons" (white Text on Black box) on a new "Menu" Layer.
2. The Hamburger icon is on the MouseOff Layer withe a Colour Dodge Transparency of a Red cross on the Menu layer; both are Soft-Grouped.
3. I added a #Link to these just to change the mouse pointer to a Hand.
4. I selected all the above and made them Repeat on all Pages.
5. I then created new Pages and gave them meaningful Page Filenames (index, page-1, page-2).
6. Back to the Menu buttons, I select each one and add the correct Link to the required Page.
7. Finally, I created the design as a Supersite.

Hopefully, with the example and instructions, you will be able to deconstruct my approach and rework for your needs.

Acorn

[oranda]

Thank you ever so much for this; I will take a look at your file. It is all a bit to process as I am new to Xara web design but it is all very interesting. Thanks again.