Mobile Nav Bar Question

[TSinIowa]

I would to try to make a nav bar for mobile with the bar going across and top the screen like the example in the photo. Is this possible with xara?
(photos is just something i drew up to show a visual)

[Chris M]

Group your hamburger button and header bar, and Utilities > Web Sticky/Stretchy > Sticky (radio button)
Copy the group
Create a new layer and name it menu(lock)
Paste in place the button and header bar group, and Utilities > Web Properties > Link (tab) and type popup:close in the Link To Web Or Email Address box. Hide the menu layer.
Select MouseOff from the Page and Layer Gallery and select the hamburger group, and Utilities > Web Properties > Link (tab) > Pop-Up Layer (radio button) > drop down the box and choose Menu(lock) from the list

Show the menu(lock) layer in the Page and Layer Gallery and select the layer. Add any links you want and make them sticky.

>>> Menu Lock Bar.xar

[TSinIowa]

Group your hamburger button and header bar, and Utilities > Web Sticky/Stretchy > Sticky (radio button)
Copy the group
Create a new layer and name it menu(lock)
Paste in place the button and header bar group, and Utilities > Web Properties > Link (tab) and type popup:close in the Link To Web Or Email Address box. Hide the menu layer.
Select MouseOff from the Page and Layer Gallery and select the hamburger group, and Utilities > Web Properties > Link (tab) > Pop-Up Layer (radio button) > drop down the box and choose Menu(lock) from the list

Show the menu(lock) layer in the Page and Layer Gallery and select the layer. Add any links you want and make them sticky.

>>> Menu Lock Bar.xar

Thanks Chris M.
When I went to preview my site the logo is not at the top. How do I fix that?

[Chris M]

Hard to tell from the screenshot.

Logo should be on MouseOff layer. Push it upwards until it looks nice under the header bar. It will scroll under the header when you move down the page, and will be covered when the menu is shown.

If you want to display the logo with the menu, simply copy it, then paste it wherever you want it on the menu(lock) layer.

[TSinIowa]

Hard to tell from the screenshot.

Logo should be on MouseOff layer. Push it upwards until it looks nice under the header bar. It will scroll under the header when you move down the page, and will be covered when the menu is shown.

If you want to display the logo with the menu, simply copy it, then paste it wherever you want it on the menu(lock) layer.

I moved the logo at the top of the mouseoff layer, and it is still doing it.

[Chris M]

When you move the logo (the 2 graphics) up, to below the menu bar, it jumps back down again?

I'm not visualising this correctly, or I'm not explaining very well. I didn't mean push the logo upwards in the Page and Layer Gallery. I meant select both graphics on the page.

If that's what you're doing, we may need to see the .xar/.web to work out what's going on.

[Chris M]

Like this.

[TSinIowa]

Like this.

Chris, is there away I can edit the pages without drop downs showing? I know i can hide them but when i preview the page, the drop down doesn't work of course.

[Chris M]

Hiding (eye icon) the layers doesn't affect the preview. they are only hidden in edit mode.

Go ahead and hide the layer, move your logo and then preview.

[TSinIowa]

Hiding (eye icon) the layers doesn't affect the preview. they are only hidden in edit mode.

Go ahead and hide the layer, move your logo and then preview.

That worked! Thanks!