framework7

Open full view…

Navbar question

Z Milosevich
Tue, 10 Feb 2015 15:57:28 GMT

Hi guys, I am working on tablet project where navbar should be always on top, so I moved navbar from views div and I changed z-index and I thought "voila" that should be it, but then I noticed that menu toggle function is not working anymore, when I click on menu icon it open side panel but can't close it. Any ideas how to fix it? Thanks you in advance.

NikolayKuznetsov
Tue, 10 Feb 2015 16:06:14 GMT

I moved down panel to 44px (height of navbar)

Z Milosevich
Tue, 10 Feb 2015 16:45:35 GMT

Nikolay, thanks. I tried what you suggested but still doesn't work. Menu icon works on right side of nav but doesn't on left. Here is example, http://www.ctrlstudio.com/lab/tablet/framework_v1/

Kelvin
Tue, 10 Feb 2015 17:04:39 GMT

Left icon has class "open-panel", that's why it's only working if the panel is closed and needs to be opened

NikolayKuznetsov
Tue, 10 Feb 2015 17:45:21 GMT

> @klvn > Left icon has class “open-panel”, that's why it's only working if the panel is closed and needs to be opened That's right. You need to process icon's click and close panel in a handler (javascript code).

Z Milosevich
Tue, 10 Feb 2015 18:01:00 GMT

KLVN, thanks but left icon and right icon have same class <a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a> but behaving differently. I think it's just icon position, if I move left icon 300px to the right, then works.

Kelvin
Tue, 10 Feb 2015 18:50:46 GMT

Both icons are just opening the panel. The panel is closing because you click on an invisible layer that causes the panel to close (panel-overlay)

Kelvin
Tue, 10 Feb 2015 18:53:06 GMT

> @alt4max > I think it's just icon position, if I move left icon 300px to the right, then works. It's working because it's then located in this panel-overlay area that is everywhere except the 300px on the left side because we have the panel there. You would need a panel-overlay that covers the complete navbar and the rest of the page except panel

NikolayKuznetsov
Tue, 10 Feb 2015 18:58:10 GMT

> @klvn > except the 300px except 260px - the width of panel, so adding icon (or for navbar) handler solves this task too.

NikolayKuznetsov
Tue, 10 Feb 2015 18:59:26 GMT

Or toggle classes for icon/navbar in the panel opened/closed event handlers

Kelvin
Tue, 10 Feb 2015 18:59:55 GMT

> @nikoniko > toggle classes That would be the best solution

Z Milosevich
Tue, 10 Feb 2015 19:30:41 GMT

Thank you guys, I did something similar just with CSS, added navbar-overlay in panel-overlay, same width and height as navbar and shifted -260 on panel open. http://www.ctrlstudio.com/lab/tablet/framework_v1/ Again, thanks and works for now. :)

NikolayKuznetsov
Wed, 11 Feb 2015 04:40:54 GMT

http://prntscr.com/63np53 Is it correct?

Z Milosevich
Wed, 11 Feb 2015 14:47:27 GMT

Yes, this is something I play with, thanks for checking out :)