Combine 2 navigation panes : TOP + LEFT ?

[jjorissen]

Hi,
Is it possible to combine 2 navigation panes; 1 on top + 1 on the side?
As it's only possible to select 1 skin for my target and the skin has 1 'main menu position' (top, left or right).

So I wonder if and how this can be done?

Thanks.

[NorthEast]

Flare doesn't offer a way to display both top navigation menu and side navigation menus together.

But you can have a top nav menu (i.e. main menu position - Top), and have a menu proxy on the side.
You can see this layout in Flare's own help, and the Top Navigation templates supplied with Flare.
However, the menu proxy is a fixed list - so it's not the same as the side navigation menu (i.e. main menu position - left/right) where you can expand/collapse menu sections.

If you don't mind using some CSS hacks, you might be able to display the side nav menu and the top nav menu.
In the output (for top nav), there's a hidden div.sidenav-wrapper which contains a working side nav menu, but is set to display: none.
So you could display that - but it's a hack solution, and may not always work if MadCap change things in the future.

[jjorissen]

Thank you for the info!

Flare doesn't offer a way to display both top navigation menu and side navigation menus together.

But you can have a top nav menu (i.e. main menu position - Top), and have a menu proxy on the side.
You can see this layout in Flare's own help, and the Top Navigation templates supplied with Flare.
However, the menu proxy is a fixed list - so it's not the same as the side navigation menu (i.e. main menu position - left/right) where you can expand/collapse menu sections.

If you don't mind using some CSS hacks, you might be able to display the side nav menu and the top nav menu.
In the output (for top nav), there's a hidden div.sidenav-wrapper which contains a working side nav menu, but is set to display: none.
So you could display that - but it's a hack solution, and may not always work if MadCap change things in the future.

[DLL]

Hi. Whether you build with a top or side navigation skin, the code is practically the same, except that one navigation method is visible and the other is hidden because its class has the display: none; property. Hence, you can easily make the other navigation method visible, whichever it is, with some CSS overrides.

If you build with a sidenav skin, simply add this to your stylesheet:

Code: Select all

ul.navigation
{
  display: initial;
}

The top menu will however appear squished between the logo and the search bar. To remedy this, override the search bar's flex-grow property to make it take the least possible space:

Code: Select all

.nav-search-wrapper
{
  flex-grow: 0;
}

With a few more CSS overrides, you may be able to put the search bar underneath the menu. Use your web browser's component inspector to play with the CSS properties of each div and see what you can accomplish.

You can also attempt to accomplish this with a topnav with the following CSS:

Code: Select all

.sidenav-wrapper
{
  display: initial;
}

However, the default layout of a topnav is really not suited for this. The menu will appear as small as possible, in its own row between the banner and the topic. You would have to use a lot of CSS overrides to make it look as good as a sidenav skin.

Keep in mind that this is a hack, and that future updates of Flare may break this.

I hope that helps.