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

Make Hamburger Menu Persist in Web Display

Postby mymojo on Wed Feb 06, 2019 5:26 pm

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!
mymojo
Propeller Head
 
Posts: 28
Joined: Thu Aug 28, 2008 4:12 pm

Re: Make Hamburger Menu Persist in Web Display

Postby Dave Lee on Thu Feb 07, 2019 12:47 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5658
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Make Hamburger Menu Persist in Web Display

Postby chrisj on Mon Feb 11, 2019 8:30 pm

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
chrisj
Propeller Head
 
Posts: 86
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Make Hamburger Menu Persist in Web Display

Postby mymojo on Fri Feb 15, 2019 3:29 pm

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!
mymojo
Propeller Head
 
Posts: 28
Joined: Thu Aug 28, 2008 4:12 pm

Re: Make Hamburger Menu Persist in Web Display

Postby amitkapoor on Thu Sep 19, 2019 9:55 am

Hi,

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

-Amit
amitkapoor
Propeller Head
 
Posts: 14
Joined: Mon Sep 16, 2019 5:23 am

Re: Make Hamburger Menu Persist in Web Display

Postby Dave Lee on Thu Sep 19, 2019 11:50 pm

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5658
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Make Hamburger Menu Persist in Web Display

Postby amitkapoor on Fri Sep 20, 2019 3:26 am

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
amitkapoor
Propeller Head
 
Posts: 14
Joined: Mon Sep 16, 2019 5:23 am

Re: Make Hamburger Menu Persist in Web Display

Postby Dave Lee on Fri Sep 20, 2019 4:53 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5658
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 3 guests