Using a Symbol for Nav Bar on Mobile Variant

[wolfpup187]

I want to use a symbol (the 3 horizontal lines) in my mobile variant to bring up a vertical nav bar. I can't figure out how to do this. If I ungroup to edit graphics and replace my text with the symbol, then it is no longer a nav bar and it doesn't give me the option to make it a nav bar. Many of the mobile sites out there have this so I know it is possible..... What am I missing?

I have attached the file for your review/comments.
Website110415.xar

Thanks.

PS. I am just starting to work on the mobile part of the website, so I haven't resized any of the graphics or text yet.

[gwpriester]

What I do is this. I create a menu on a new layer (I name the new layer Menu—no surprise there). Then I create on this new layer individual buttons (text grouped with a rectangle) and link the buttons to the appropriate pages. I link the hamburger (the three stacked rectangles) to the Menu layer.

Once you have done this for one layer, you can copy the menu layer in the Page & Layer Gallery, and then Paste Menu Layer on the other pages. The Menu layer needs to be above the MouseOff layer.

You can see an example here www.gwpriester.com Open this link on your phone.

[wolfpup187]

Ok, so basically you don't use the Create Navigation Bar option and instead create it on your own using layers. I thought maybe there was a way to do it in the option, but apparently not, so I will use your method. Thank You!

[gwpriester]

I think there is a way to do this with the Navigation Bar tool, but I have never been happy with the results. Taking a few moments and creating your own works much better.

[Acorn]

Ok, so basically you don't use the Create Navigation Bar option and instead create it on your own using layers. I thought maybe there was a way to do it in the option, but apparently not, so I will use your method. Thank You!

You can use a NavBar but it has to be on named layers: e.g., Layer n and MouseOver Layer n. You can then add your hamburger to the MouseOff Layer and have a Link to Layer n with a Fade In effect.
This

There is one trick: you need to ungroup the Nav Bar, move MouseOff objects to Layer n and MouseOver objects to MouseOver Layer n; select all objects and then Create Navigation Bar...
The NavBar functions are are retained.
If anyone knows a better way, sing out.

Acorn

[behzad]

I simply open one of the templates (the one pager) and copy the hamburger bar into a new document, then you can add or change the page names.

[Egg Bramhill]

Here's a simple one, very similar to the one Behzad points out, but it doesn't require the 'Materials Icons' font. Just copy & paste into a new site.

[Acorn]

I was answering the OP request "to bring up a vertical nav bar". behzad/Egg are describing a single button NavBar with submenu capability.
I'm allowing the same navigation buttons in a Main site to be used in a Variant but hidden on a pop-up layer until access by clicking on (or hovering over) the hamburger icon.
It is a choice of styling over capability.

Acorn

[wolfpup187]

Well, after playing around with Gary, Acorn, Egg and Behzad's ideas, I decided to create my own as Gary did. I will share it when I get the site completed. I may need input as to how well people think it works. Gary's site is a single menu with no sub-menu items. Mine has two menu items that contain sub-menus. Thanks for all the input.

[Acorn]

Well, after playing around with Gary, Acorn, Egg and Behzad's ideas, I decided to create my own as Gary did. I will share it when I get the site completed. I may need input as to how well people think it works. Gary's site is a single menu with no sub-menu items. Mine has two menu items that contain sub-menus. Thanks for all the input.

Good to hear. sometimes, without discussion, you hit a brick wall. The discussion might not directly help but it sometimes shows you a door.

Acorn