Multiple Top Navigation Bars

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Multiple Top Navigation Bars

Postby arshabhirai on Thu Aug 31, 2017 12:10 pm

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.
arshabhirai
Propeller Head
 
Posts: 18
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Postby Jbleasdale on Fri Sep 01, 2017 2:01 am

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.
Jbleasdale
Propeller Head
 
Posts: 38
Joined: Tue Mar 21, 2017 3:35 pm

Re: Multiple Top Navigation Bars

Postby Dave Lee on Wed Sep 06, 2017 3:29 am

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

Re: Multiple Top Navigation Bars

Postby arshabhirai on Wed Sep 06, 2017 7:55 am

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.
You do not have the required permissions to view the files attached to this post.
arshabhirai
Propeller Head
 
Posts: 18
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Postby arshabhirai on Wed Sep 06, 2017 8:03 am

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/
arshabhirai
Propeller Head
 
Posts: 18
Joined: Tue Feb 28, 2017 12:15 pm

Re: Multiple Top Navigation Bars

Postby Dave Lee on Thu Sep 07, 2017 12:49 am

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

Re: Multiple Top Navigation Bars

Postby arshabhirai on Thu Sep 07, 2017 7:11 am

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!
arshabhirai
Propeller Head
 
Posts: 18
Joined: Tue Feb 28, 2017 12:15 pm


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 3 guests