Replicating MadCap's New Top Nav Topic Layout

[tkilpatrick]

Hello all,

I LOVE MadCap's new design for their Top Nav online help. Specifically, I like how they moved the Side Menu from the right (default) side of the page to the left: http://help.madcapsoftware.com/flare201 ... -Tools.htm

In addition, they moved the Breadcrumbs and created a Search Bar to the left, to sit above the Side Menu. The last touch that pulls it all together is having all three of these items fixed on the page, so you always have easy access to them.

Referencing the link above, can someone please explain how to replicate their Topic layout? So, (1) fixed Side Menu on the left, (2) search bar above the Side Menu, (3) breadcrumbs above the search bar, and (4) keeping the Topic Toolbar buttons (Print, Expand All buttons) at the top-right of the page.

I've already tried the simple trick of setting the 'div.sideContent' style to float LEFT instead of RIGHT, but that simply moves the Side Menu AND the Topic Toolbar buttons to the left.

Thanks so much for any help/isight,
Troy

[Michelle_Gardner]

Did you find the answers to your questions, tkilpatrick? I'd like to see what this looks like.

[NorthEast]

Create a new master page.

In your master page, create a two column layout - I'd guess MadCap used a responsive layout.
Responsive layout: https://help.madcapsoftware.com/flare20 ... ayouts.htm

In the left column, insert the breadcrumbs proxy, search bar proxy, and a menu proxy.
About proxies: https://help.madcapsoftware.com/flare20 ... roxies.htm

Create a menu skin (HTML5 Component - Menu) and set this to be fixed - on the skin Setup tab, set Fixed Menu - All.
Make sure the menu proxy in your master page is set to use this menu skin.

In the right column in your master page, insert the topic toolbar proxy, and the topic body proxy underneath.

[tkilpatrick]

Hi Dave,

Thanks for the reply; you set me on the right path. The only ran into one issue: The side menu was fixed, while the breadcrumb and search proxies were not. What I ended up doing is simply making the entire left column fixed (I set its position to "fixed" in the stylesheet); I then tweaked the margins and widths of the two responsive columns and the various proxies to line them up. Works like a charm.

The issue I'm having now is with the responsive nature of the web output: As I shrink my browser, the three proxies in the left column aren't behaving as I would expect:

**NOTE: I had these responsive design issues before creating this new master page, so I don't think the two are related**

1. The side menu (MadCap | menuProxy) isn't collapsing into a hamburger menu like it should.

• The search bar is basically static.

• The breadcrumbs do act responsively insofar as they get scrunched, but they basically turn into a tall vertical column that pushes the other two proxies down.

In addition, the body content in the right column ends up bleeding under these three proxies.

I spent some time scouring the forums but haven't had any luck getting help on these particular issues...would you be able to explain how to get these three proxies to behave responsively? I really just want the topic pages to act responsively like they do on the Madcap Flare help site. Any insight would be greatly appreciated!

Regards,
-Troy

[NorthEast]

1. The side menu (MadCap | menuProxy) isn't collapsing into a hamburger menu like it should.

• The search bar is basically static.

• The breadcrumbs do act responsively insofar as they get scrunched, but they basically turn into a tall vertical column that pushes the other two proxies down.

In Flare's help the menu proxy and search bar proxy are put inside a div, and that div is set to display: none in the tablet and mobile mediums. So they're only displayed for default (desktop).

The search in the skin header is displayed for the tablet and mobile mediums, and is hidden for desktop.

To display the breadcrumbs above the topic, I'd guess that their responsive layout is set up so that the two columns are stacked in Tablet and Mobile - i.e. each of your columns has a Cell Width of 12.

[Folkie]

Glad I spotted this, I really like Madcap's help layout as well. I'm using sidenav at the moment but our online help isn't live outside the company yet and I have pretty much carte blanche over its design, so after I've got our next release guide finished I might just start having a play