My menu (navigation drawer) appears as a lightbox but sticky headers are on top of background

#1

Hi everyone, I understand that in order to create sticky headers I have to turn them into dynamic panels, and then pin to browser (https://www.axure.com/support/training/scroll-activated-sticky-header-tutorial). My main question is the following… I have 3 different headers that go one on top of the other, created as masters and pinned to the specific location.
Header a that goes on top, Header b that appears underneath and Header C. I’ve created them as dynamic panels and masters so that they can be pinned.
Header A contains a hamburger icon to open a navigation drawer which is another dynamic panel & master inside header A. My main problem is that when I got screens with combination of Headers a/b/c/ as sticky and I open the menu navigation drawer, this one opens as a lightbox in everything but both header a & header b appear on top of the lightbox and I don’t want that, I want the menu to display on top of everything.

Here is an example: https://5nt3y4.axshare.com/#c=2 click the menu icon.

#2

Hi nicolebtesh,

I’m having a little trouble understanding the desired effect, but it sounds like you’d like the hamburger menu item to appear at the top of your page at all times, even when the navigation drawer is expanded. Does that sound correct? If so, what may help is to add a “Move to” interaction to move the menu widget to the right to accommodate for the expanded navigation menu.

For example, with the OnClick to show the navigation menu, add an additional “Move to” interaction to move the black and white bars to:

([[LVAR1.right]], [[target.y]])

where LVAR1 is referencing the navigation menu and target is referencing the widgets that are targeted in the interaction (the black and white bars). This will move the black and white bars to the right of the navigation menu on show.

I’ve attached a quick example file to demonstrate this. Lmk I misunderstood, or you have any questions!

PushRight.rp (53.0 KB)

#3

Hi @Jane_Axure, thanks for the response, but no, I didn’t mean that… I meant that the navigation drawer is appearing as a lightbox but my sticky headers appear on top and they are highlighted white as you can see in the example. I want my navigation drawer to be only element that stands out when it’s opened, so therefore, sticky headers should appear on the back of the “dark” background that the lightbox produces. I’ve attached a screenshot for further details, let me know if this is more clear… the main problem here is that having sticky functionality in headers is damaging my navigation drawer sliding functionalities and appear as a lightbox.

Screen Shot 2018-07-20 at 16.37.00.png890×288 1.62 KB

#4

Hi nicolebtesh,

Gotcha, thanks for clarifying. In that case, would you be able to post your RP file here? I’d like to tinker with a few of your widgets/interactions to get it to work as you’d like, as I’m having trouble replicating your master/pinned-DP setup. Thank you!

#5

@Jane_Axure Of course! Here it is…

Regards and thanks for everything,

Testing menu.rp (119.1 KB)

N.

#6

Hi nicolebtesh,

Thanks for the RP file! If you wanted the drawer master to open as a lightbox without the sticky headers visible, you can do a simple re-arrangement of your widgets. That is, you just need to cut & paste the drawer master into the “DP_Header_01_menu” dynamic panel, and this will show the drawer master by itself when shown as a lightbox.

I’ve edited your file to demonstrate this. Please lmk if I misunderstood, though!

Testing menu_EDIT.rp (116.4 KB)

#7

Hi @Jane_Axure thanks for everything!

#8

Jane_Axure,

Great file on the use of the slide in, but I do have a couple of questions…

  • how can i turn off the sticky header?
  • how can i extend the left slide in so that if i’m using it as an info panel it won’t just sit there but will scroll with the rest of the page?

Thanks,
Michael