Xara Web Designer 10 Premium - How to make the 3 line navbar that mobile devices use?

[KarenC]

Last question (for today)

How do you make the navbar 3 thick line MENU symbol you see everywhere on mobile device variants, and make it function (expanding menu choices downward)? Does anyone have a sample?

When I look at Xara Templates, none of the mobile versions have that navbar.

(pic enclosed for clarification)

Thanks!
Karen

[Merlin_AZ]

These are the instructions I use.

Double click the Navbar to bring up the Navbar editor. Delete each button in the main list, so there’s only one remaining button (typically called Home). Make sure this has no link on it. Now un-check and then re-check the ‘Site Navigation Bar’ option. This will re-build a Menu on the single button, with an entry to each page of your website. You can of course edit the name of the button and the menu entries as required. (The key here is that when you make a button that has no link, a ‘site navigation bar it will put a menu on it. If the button had a link, then it would replicate that button into a NavBar.) This method only applies to websites that have automatic ‘Site Navigations bar’ option chosen. If you have a customized Navbar, then you will need to build a menu manually, using this dialog. To customize the appearance of the menu, click the ‘Pop-up menu style’ button, bottom right. Remember to preview your working menu, it’s necessary to preview the web page.

[gwpriester]

I just whipped this up. You can resize and recolor as you like. Just open the attached file. Even if you get an error code about newer version (if that should occur) it will be OK.

[KarenC]

Thank you Merlin, much appreciated...and thank you Gary, I will try it out tomorrow when I get to work.

Karen

[KarenC]

I just whipped this up. You can resize and recolor as you like. Just open the attached file. Even if you get an error code about newer version (if that should occur) it will be OK.

I downloaded it and am trying to get it to start as the "navigation bar"....but that choice is greyed out..

Then I tried modifying the existing one on a template (adventure_website), where it says "navigation menu" on the mobile version. I used Merlin's info, and then when I tried to change "navigation menu" into a square...the option again is greyed out for navigation menu.

I'm doing some sequence wrong.

Karen

[gwpriester]

A Nav Bar button has to have Text and a shape grouped. Even a single button Nav Bar.

Have a look at the attached. I grouped some text with the Menu symbol and made it the same color as the blue so it is not visible.

[KarenC]

A Nav Bar button has to have Text and a shape grouped. Even a single button Nav Bar.

Have a look at the attached. I grouped some text with the Menu symbol and made it the same color as the blue so it is not visible.

Ohhhh! That's kind of important to know. Thanks again Gary for your help

[acorupe]

Ohhhh! That's kind of important to know. Thanks again Gary for your help

I found the symbol in version 11 of Web Designer, Insert -> Font Awesome Symbol (Web Application Icons, dropped in on a filled box and you have a scale-able Mobile Menu symbol.

-Allan

[behzad]

Gary, here is the screen shot, when the name of the button is long look what happens.

[gwpriester]

Gary, here is the screen shot, when the name of the button is long look what happens.

Then go down instead.