Multiple Top Navigation Bars

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Multiple Top Navigation Bars

Post by arshabhirai »

I am curious to know if anyone has created or tried creating multiple top navigation bars. We have found a way (sort of) to add two navigation on top of the main nav, but I don't like it. It is required to keep our docs consistent with other company websites. What we have done is added a div above the <body> tag with some CSS styling -- it works but looks ugly. What I want to do is make the two top navs disappear when scrolling down. We created space for the two hacked nav bars by increasing padding-top value on the main nav. So, when we add position: relative; on the top two nav and keep the main nav fixed, it displays a huge padding on top. I tried adding some JS and css, but it's not working. If there is a neat way to make this work, I would love to know.
Jbleasdale
Propeller Head
Posts: 58
Joined: Tue Mar 21, 2017 3:35 pm

Re: Multiple Top Navigation Bars

Post by Jbleasdale »

Could you post an image of what the company websites look like, to give some context?

I am quite interested in 'hacking' the skins etc to customise them beyond the basics. With the help of some other Flare authors, I got out Top Nav looking quite smart. I think, there is a lot of scope to go beyond using Flares own skins as well.
Joe Bleasdale

My Linkedin

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

Re: Multiple Top Navigation Bars

Post by NorthEast »

I'd suggest adding a menu proxy (to your master page), and then styling that by using CSS.

I use CSS to format a menu proxy to appear as a grid:


The menu proxy will generate a list, so you could add your own CSS to display the menu horizontally in a bar instead.
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Post by arshabhirai »

Jbleasdale wrote:Could you post an image of what the company websites look like, to give some context?

I am quite interested in 'hacking' the skins etc to customise them beyond the basics. With the help of some other Flare authors, I got out Top Nav looking quite smart. I think, there is a lot of scope to go beyond using Flares own skins as well.
Thanks for the reply, Jbleasdale. Here is the screenshot:
Capture.PNG
My aim to achieve the following:
-> The main navbar to stay fixed and the top two navbars (brown and orange) to disappear while scrolling
-> Breadcrumbs to stay fixed (maybe in the navbar). I have already tried keeping the breadcrumbs fixed, but it was messing up the dropdown menu when I placed it under the nav div. When I kept it fixed in in the body section, I was not able to stretch the width to 100% across the screen; it was only stretching to the right. And, when it did stretch 100% across the screen, the breadcrumbs moved out of place when resizing the browser.
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Post by arshabhirai »

Dave Lee wrote:I'd suggest adding a menu proxy (to your master page), and then styling that by using CSS.

For example, I use CSS to format a menu proxy to appear as a grid:
http://desktophelp.sage.co.uk/sage200/s ... ection.htm

The menu proxy will generate a list, so you could add your own CSS to display the menu horizontally in a bar instead.
Thank, Dave. I will give it try. I really like the clean feel you have and the right toc with mini toc looks good. One of the navigation improvements that I am working on is the sticky toc. Ideally, I would like to have the main toc on the left and mini toc on the right. Something like this: https://developers.google.com/style/
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Multiple Top Navigation Bars

Post by NorthEast »

arshabhirai wrote:Thank, Dave. I will give it try. I really like the clean feel you have and the right toc with mini toc looks good. One of the navigation improvements that I am working on is the sticky toc. Ideally, I would like to have the main toc on the left and mini toc on the right. Something like this: https://developers.google.com/style/
You can do that by using with two menu proxies (not mini TOC proxies) - one to show the TOC/menu, one to show headings in that page.

Set up the master page in columns using either Flare's responsive layouts or Foundation grid styles.

Also, I don't think Flare can handle two Fixed menus on a page - it only seems to work with one fixed item.
If you need two fixed items, then don't set them to fixed, and instead set them up using Foundation "sticky" styles - http://foundation.zurb.com/sites/docs/sticky.html
(The Sticky javascript is already provided, so you don't need to include it - it's what Flare is using in the background for fixed menus.)
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Post by arshabhirai »

Dave Lee wrote:
arshabhirai wrote:Thank, Dave. I will give it try. I really like the clean feel you have and the right toc with mini toc looks good. One of the navigation improvements that I am working on is the sticky toc. Ideally, I would like to have the main toc on the left and mini toc on the right. Something like this: https://developers.google.com/style/
You can do that by using with two menu proxies (not mini TOC proxies) - one to show the TOC/menu, one to show headings in that page.

Set up the master page in columns using either Flare's responsive layouts or Foundation grid styles.

Also, I don't think Flare can handle two Fixed menus on a page - it only seems to work with one fixed item.
If you need two fixed items, then don't set them to fixed, and instead set them up using Foundation "sticky" styles - http://foundation.zurb.com/sites/docs/sticky.html
(The Sticky javascript is already provided, so you don't need to include it - it's what Flare is using in the background for fixed menus.)
Awesome! It sounds like a perfect solution. I will move to design work soon -- once I get the upcoming release out. Cheers!
minicyclist
Propeller Head
Posts: 60
Joined: Wed Apr 09, 2014 3:51 pm

Re: Multiple Top Navigation Bars

Post by minicyclist »

Hi,

Did you get this to work? I'd like to have second nav bar which is generated using a different TOC, or entirely manually. But I can't see where/how to insert the menu proxy.

Thanks,
Ian
arshabhirai
Propeller Head
Posts: 44
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Post by arshabhirai »

minicyclist wrote:Hi,

Did you get this to work? I'd like to have second nav bar which is generated using a different TOC, or entirely manually. But I can't see where/how to insert the menu proxy.

Thanks,
Ian
I haven't had time to work on this further. It's on my list of things to do.
Post Reply