Make Hamburger Menu Persist in Web Display

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
mymojo
Propeller Head
Posts: 28
Joined: Thu Aug 28, 2008 4:12 pm

Make Hamburger Menu Persist in Web Display

Post by mymojo »

Hi all!

Long time no post. Alright, so here it is. Top Navigation Target - I'd like the hamburger menu to always be available. I know that you can do that by increasing the tablet breakpoint in the target, but that changes my responsive layout. I need my responsive layout to recognize when it's a web interface, but I also want that hamburger menu full-time.

Anybody got the smarts on this?

Thanks in advance!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Make Hamburger Menu Persist in Web Display

Post by NorthEast »

I don't know how you could separate the responsive menu and Responsive layout, since Flare produces all the CSS for that at build time.

I guess one way is not to use Flare's Responsive Layout, and use Foundation Float Grid classes instead. The foundation grid CSS is already included in HTML5 outputs (only for the Float Grid, not other types). The breakpoints for the Foundation grid classes are independent of the mediums/breakpoints set in Flare.
https://foundation.zurb.com/sites/docs/grid.html
chrisj
Propeller Head
Posts: 87
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Make Hamburger Menu Persist in Web Display

Post by chrisj »

Alternatively, you might just be able to make the menu persist by setting your tablet breakpoint and then just write your own media queries for the content you want responsive. If you already have the tablet/mobile breakpoints in your css, I'm wondering if you could just change the query from @media tablet to @media screen and (min-width: whatever width you want).
Chris Jones
Product Content Manager - TEAM Software
Image
mymojo
Propeller Head
Posts: 28
Joined: Thu Aug 28, 2008 4:12 pm

Re: Make Hamburger Menu Persist in Web Display

Post by mymojo »

Alternatively, you might just be able to make the menu persist by setting your tablet breakpoint and then just write your own media queries for the content you want responsive. If you already have the tablet/mobile breakpoints in your css, I'm wondering if you could just change the query from @media tablet to @media screen and (min-width: whatever width you want).
Interesting idea, I will try that!
amitkapoor
Propeller Head
Posts: 33
Joined: Mon Sep 16, 2019 5:23 am

Re: Make Hamburger Menu Persist in Web Display

Post by amitkapoor »

Hi,

What worked for you finally? Can you share? I am trying to achieve the same persistent display of the icon.

-Amit
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Make Hamburger Menu Persist in Web Display

Post by NorthEast »

amitkapoor wrote:What worked for you finally? Can you share? I am trying to achieve the same persistent display of the icon.
In the target Skin tab, just change the tablet and mobile breakpoints to a high value like 5000px.

This changes the breakpoints for tablet and mobile mediums, which are used by the skin, and any Responsive Layouts that you might set up.
amitkapoor
Propeller Head
Posts: 33
Joined: Mon Sep 16, 2019 5:23 am

Re: Make Hamburger Menu Persist in Web Display

Post by amitkapoor »

Thanks. I have already tried that. But the navigation bar is temporary displayed and then goes away again on its own. I want it to show hide with click on the hamburger icon. How do I do this? I see people using zurb as one option. I am looking for an easier native way.

-Amit
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Make Hamburger Menu Persist in Web Display

Post by NorthEast »

amitkapoor wrote:Thanks. I have already tried that. But the navigation bar is temporary displayed and then goes away again on its own. I want it to show hide with click on the hamburger icon. How do I do this? I see people using zurb as one option. I am looking for an easier native way.

-Amit
That's how the that navigation control works - when you select a topic from the navigation, it will hide again.

There's no setting or 'native' way in Flare to change that. You can just change the slide-out menu to use a tree or drilldown control.
Post Reply