I am trying to build a 2nd level menu linking from menu embedded in a reusable header section. I read on the forum that you cannot recreate a floating group within a reusable container and you need to add as reuseable element to each page. How do you ensure that 2nd level menu always follow the header menu
This is what I am after
Also since app will be responsive, will not use standard menu when display width less than x pixels and will use hamburger menu instead
Hello Eric, 
If you use individual groupfocus elements which have use Home, Products, Support, and Contact as their reference elements - the groupfocus elements would display in the same way as your screenshot image. All of the elements would be contained within the reusable header element. Is something like this what you are trying to set up in your app?
Hi Faye, thanks for your advice and I started to built as per your instructions and discovered that this is only possible when the Header is on a transparent background.
I guess the only option would be to remove the menu from the Header and make it as a separate reusable component, do you agree?
No problem! I’m sorry I’m not sure I understand - this should all work within the reusable header (correct me if I’m missing something!). Here’s a forum example using the groupfocus elements for the 2nd level:
Preview:
Editor:
Thx Faye, much clearer now, my issue was that I wasn’t using the GroupFocus. Last question, in your configuration I dont see how you enabled visibility of the GroupFocus object. Is this auto once you hover on the reference element?
Ohh, right! Yes, the hover functionality isn’t obvious - I used a workaround in order to show the GroupFocus elements on hover. Currently, the GroupFocus can’t appear on hover through a conditional statement such as “When Home Text is hovered” --> This element (the GroupFocus) is visible (it’s not an option, below:).
Instead, three ‘hidden buttons’ must be created, which then use workflows to show and hide the GroupFocus Elements, based on the visibility of the ‘hidden buttons’. If you look in the elements panel, these are the three hidden buttons (completely transparent):
These hidden buttons have conditional statements on each of them to become visible when a certain reference text element is hovered, or a certain GroupFocus element is hovered. This allows us to create workflows which show and hide the GroupFocus elements when the hidden buttons are visible, and the hidden buttons are visible when the reference text elements are hovered.
To get this to work, there are six “Do When Condition is True” statements which show and hide the three GoupFocus elements. For example, when “Home” is hovered, “Hidden Button 1” is visible. In the workflow, the when statement is “Do When Condition is True: When Hidden Button 1 is visible” (every time) --> Show: GroupFocusA.
And then the reverse workflow is there as well: “Do When Condition is True: When Hidden Button 1 isn’t visible” (every time) --> Hide: GroupFocusA.
Then I repeated that process for the other two GroupFocus elements (GroupFocus B and GroupFocus C). If you have any trouble, please let me know and I can help set this up!
Link to reusable element:
Hi Faye,
Finally got around to implementing 2nd level menu and followed your instructions. It works a trick, thanks for your help. Eric
Happy to hear Eric! No problem at all!
Hi Faye!
I have set up my header menu like you have here, but sometimes the menu shows/hides, sometimes it doesn’t and I’m pulling out my hair trying to figure this out. Do you have a couple minutes to look at what I might be doing wrong?
THANK YOU in advance!!
