Always open hamburger slide out?

[peaveygtr]

Problem:

• I have a manager who wants top nav, but likes the top nav on the left side and does not like tripane.
  I have users who don't know how to click the hamburger button to open the menu.
  If they get it, the menu closes after they navigate to a new topic

Solution:
If I set the tablet break point very high - it always triggers the hamburger icon.
However, how can I have the navigation auto open so the hamburger button doesn't have to be clicked ever?

[Nita Beck]

Solution:
If I set the tablet break point very high - it always triggers the hamburger icon.
However, how can I have the navigation auto open so the hamburger button doesn't have to be clicked ever?

Setting a high break point actually IS the solution for always getting the hamburger icon. But I don't think there is a way to effectively circumvent the hamburger button click-on event. If you always want the menu of topics to be displayed, then maybe you should produce Tripane output instead of Top Nav output. (Sorry, I'm assuming you're producing Top Nav... perhaps my assumption is wrong.)

Hey Dave Lee, is there a way to circumvent (or automate) the hamburger button click-on event?

[peaveygtr]

It sounds like I'm going against the grain here, but if possible to always keep open, still let me know.

But no biggie - I'll probably steer away from this option, working instead on keeping the side menu on the left of the page.

The other option to create a custom portal just to simulate a top nav homepage and link to tripane seems like out of scope work when the tool is designed for either top nav or tripane, not both.

[Nita Beck]

You might not be going against the grain. I just might not know enough about the solution, which is why I asked our pal Dave Lee to jump in. I'll send him a PM to alert him to this thread.

[NorthEast]

There's not a simple way I know of to change the behaviour of the responsive (hamburger) menu in top nav.

If you want a permanent menu displayed on the left hand side, which is also browsable, then I think to be honest the tripane skin does that well (and with no extra fuss).

In my view, the responsive hamburger menu that you get in top nav isn't that good for navigation. It isn't context sensitive (you have to start from the top each time), and it shows less of the menu than the tripane version of responsive hamburger menu.

For our top nav skin, we've gone in the other direction and reduced the breakpoint, so it effectively hides the responsive hamburger menu for most users. Instead I've preferred the menu proxy for navigation, which I think does a much better job than the responsive hamburger menu.

[chrisj]

I agree that the menu proxy is a more user-friendly solution. I've set mine up to display the proxy within the hamburger slideout as well, rather than reducing the breakpoint as Dave suggests. This way, when someone is on a mobile device, the slideout will contain the menu proxy rather than the default TOC.

[peaveygtr]

Thanks for the answers. I too like the side menu, and have just moved it to the left so it's not butting up against content . It turned out that was the source of the feedback I was hearing, that the side menu seemed to be "in the way."

Within these responses there's a suggestion to edit what the responsive hamburger menu displays, to display a menu proxy. Honestly, I wasn't aware that I could customize how that menu looked, and whether or not it pulls a custom menu proxy which may differ from the top nav I set up in the skin settings. I'll admit I'm new here, but where would I turn for instruction on customizing what the responsive menu looks like? Even if I do make it show in the rarest of occasions (agree with David's feedback), I still wouldn't mind adjusting the nav colors it uses and/or maybe improving the menu it uses so that it doesn't show as much to click through.

[NorthEast]

Within these responses there's a suggestion to edit what the responsive hamburger menu displays, to display a menu proxy. Honestly, I wasn't aware that I could customize how that menu looked, and whether or not it pulls a custom menu proxy which may differ from the top nav I set up in the skin settings. I'll admit I'm new here, but where would I turn for instruction on customizing what the responsive menu looks like?

You can only change the styles of the responsive off-screen menu (in the skin). But you can't customise the behaviour of the off-screen menu, or set it to use a menu proxy - or at least that's not an option in Flare.

I would guess that chrisj is using a script to do this. For example, you could include a menu proxy in the page, and then use a script to move this inside the container used for the off-screen menu (and replace the existing drilldown menu).

[J_Middleton]

I figured out how to replace the Navigation Slide Out Button (hamburger slide out) with another icon.
I experimented with a magnifying glass and question mark (I swapped out the hamburger icon for a Menu icon, because no tooltip can be made with Flare 2017r3. The original hamburger icon is "ResponsiveMenuButton.png") because the Search and Navigation panel opens onclick. After shopping it around, Menu was suggested as more sensical. See 1) d) below.
I discovered the "hamburger" icon is common on mobiles (not desktops). If I could make a tooltip appear using Flare controls before output, I would go back to the common hamburger icon.
1) How do I get rollover tooltips on elements in the tripane header?
a) Found how to get rollover tooltip on Search bar submit in HTML5 Skin Editor, UI Text section, Search Submit Button
b) I'm chasing this forum discussion: "Flare 11 - Adding Toolbar Tooltips" for tooltip on Navigation Slide Out Button (hamburger slide out)--Dead end for this purpose.
c) Requested edit capability for mobile.css and tablet.css in Flare as a future feature.
d) There are no controls for adding a tooltip to the Help header Logo or Navigation Slide Out Button in UI Text of the HTML5 Editor. I made a new icon that looks like the Toolbar buttons, the light blue line circle, now around the word "Menu" in white. This replaces the image ResponsiveMenuButton.png in Styles of HTML5 Skin Editor, for Navigation Slide Out Button>Background in both Tablet Medium and Mobile Medium.