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!
Make Hamburger Menu Persist in Web Display
Re: Make Hamburger Menu Persist in Web Display
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
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
Re: Make Hamburger Menu Persist in Web Display
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
Product Content Manager - TEAM Software
Re: Make Hamburger Menu Persist in Web Display
Interesting idea, I will try that!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).
-
- Propeller Head
- Posts: 33
- Joined: Mon Sep 16, 2019 5:23 am
Re: Make Hamburger Menu Persist in Web Display
Hi,
What worked for you finally? Can you share? I am trying to achieve the same persistent display of the icon.
-Amit
What worked for you finally? Can you share? I am trying to achieve the same persistent display of the icon.
-Amit
Re: Make Hamburger Menu Persist in Web Display
In the target Skin tab, just change the tablet and mobile breakpoints to a high value like 5000px.amitkapoor wrote:What worked for you finally? Can you share? I am trying to achieve the same persistent display of the icon.
This changes the breakpoints for tablet and mobile mediums, which are used by the skin, and any Responsive Layouts that you might set up.
-
- Propeller Head
- Posts: 33
- Joined: Mon Sep 16, 2019 5:23 am
Re: Make Hamburger Menu Persist in Web Display
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
-Amit
Re: Make Hamburger Menu Persist in Web Display
That's how the that navigation control works - when you select a topic from the navigation, it will hide again.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
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.