Top Nav layout mods

[Carlsen]

Does anyone know of a MadCap or other resource that explains how to modify the Top Navigation help output header area? I can kind of decipher some changes by looking at the Flare sample projects, but it's not obvious how to make changes without breaking something. I've seen a number of different layouts, so obviously someone has figured it out. Just wondering if there are any resource out there that could help me.

So for example, what I'd like to do is change the default Top Nav output below

TopNav-default.png

To be like the following, which more closely matches the layout of the GUI I'm documenting:

TopNav-mod.png

Beyond the header, I'd also like to know how to move the mini menu from the right side of the body to the left side. And I'd like to be able to make all of these changes without breaking the responsiveness of the layout. Easy, right?

I've seen other Top Nav help systems that move items around in the header, and I've seen the mini menu move to the left. But most of the samples I've seen also break the responsive layout.

Any resources anyone could point me to would be greatly appreciated.

[NorthEast]

I'm not aware of any resources or info, other than what MadCap provide in the help.

The arrangement of the top nav layout is fixed, so moving things around would require some scripting and CSS tweaks.

I made a similar layout for this help.
That site only uses the menu from the top nav skin, the title and search are hidden. The title/logo and the search box (which is a Search Bar proxy) are actually part of the master page.
Then I use a very simple script to move the logo and search above the menu.

[Carlsen]

Thanks Dave,

Nice looking help system. Would you mind describing what your script does to move the logo and search box? Or even share the script itself?

I guess what I'm asking is whether you're just hiding elements and then inserting copies of those elements elsewhere or if you're actually moving the elements? I know we have some ability to hide elements in the CSS, but I haven't experimented yet with any kind of scripting to make them reappear elsewhere. Moving makes more sense, so I'm curious what approach you took.

[NorthEast]

In the top nav skin, I'm hiding both the Logo and search bar; so that just leaves the Menu.
These parts of the top nav can be hidden in skin styles, by setting Layout > Display as None.

Then I set up my master page to include my own logo and heading, and the Search Bar proxy.
In the HTML, it looks a bit like this:

Code: Select all

<div class="my-header" >
    <div class="row outer-row small-collapse">
        <div class="large-6 columns">
			<p>My Logo</p>
        </div>
        <div class="large-6 columns end">
            <MadCap:searchBarProxy data-mc-skin="/Project/Skins/MySearchBar.flskn" />
        </div>
	</div>
</div>	

Whatever you use here, it just needs to be inside div.my-header

The top nav menu is positioned at the top of the page, but I wanted my logo and search to be at the top, so I added a script to the master page which moves them.

Code: Select all

$(document).ready(function(){
	$("div.my-header").prependTo("section.inner-wrap");
});

[Carlsen]

Thanks Dave,

I gave this a try, and it worked very well. I had never experimented with hiding skin elements before. Moving elements with jQuery is also a trick I need to practice with. What's nice about this solution is that it doesn't break the responsive design. What I need to figure out now is how to center the menu on the page. Horizontal centering is always harder than it seems like it should be, and then figuring out which HTML element to add the style for. Work in progress. Thanks for your help on that.

One more question. I also have a product I document that has a slightly different header, and I'd like to match the help's format to it as well. It would look something like the following, where all elements are aligned horizontally:

TopNav-MOD2.png

At first glance I thought this might be easy to do with your technique. I could hide everything, and then just add them back in the master page. But how would I add back the menu? I'm not seeing a proxy for this kind of menu. Do you know if one exists, or do you have any suggestions about how to make all of the elements on the same line?

Thanks again.

[NorthEast]

At first glance I thought this might be easy to do with your technique. I could hide everything, and then just add them back in the master page. But how would I add back the menu? I'm not seeing a proxy for this kind of menu. Do you know if one exists, or do you have any suggestions about how to make all of the elements on the same line?

Yeah, you can't find it because there isn't a proxy for the type of drop-down menu used in the top nav skin.
There is a menu proxy, but that's what is used for the side menu in MadCap's template.

In my help, that's why I still keep the top nav skin - it's only for the drop-down menu (and responsive menu).

[StraygoatWriting]

With Dave's help, I created a system that uses the top nav skin and:

*Hides everything in the top banner, apart from the mobile menu
*Has a banner that I have inserted in the master page myself, by using css
*Has a search that is added using the search proxy
*Uses a jquery smartmenus plug in to create an accordion menu that runs on the left-side (that's the bit Dave knows all about)
*Has the main content on the right
*Has 2 footer sections with links etc., at the bottom.

So in effect, I have a more stylish tri-pane that is frameless, uses the top-nav's slide-in mobile menu and has 2 footers. (I would show you, but non-disclosure agreements mean I can't). I did all the layout in divs in the master page and inserted the proxies as and where needed. The tricky bit was the smartmenu, but Dave has a post somewhere that tells you how to do it. The smartmenu can be horizontal instead of vertical, so you could add a full width div and put a horizontal menu in that - it is generated from your TOC, just like the Flare menus.

To move that box to the right instead of the left, I think you need to change the css that Flare uses internally for the build. I've had to change that to fix a few things, just make a backup first.

If you use developer tools in a web browser, you can see what styles are being used by each part of your help page - the ones you can't find in your 'in Flare' stylesheet are usually in the stylesheets in the location below:

c program files (x86) > madcap software >Flare 11 >Flare.app>Resources>webhelp2 (for html5 output, i think)>desktop>skins>fluid (for responsive). In there, you have a template file that contains the layout that is used when the top nav is built. FOR GOD'S SAKE MAKE A BACKUP OF THIS BEFORE YOU CHANGE IT!. In the same folder is a stylesheets folder that contains the stylesheets Flare uses at build time. Again, back these up before you make changes.

If you make a mess of it and you haven't made backups, you will need to reinstall Flare to get it back to its original state (or get originals from someone else and paste them back into those locations, I guess).

Oh, and you might need to mess with your windows permissions to get into those files in Flare.

[StraygoatWriting]

PS - I like what you have done with that help, Dave. The how to, useful info,and what happens when navigation sections at the top work well.

[Carlsen]

Thanks for your help. I might add a feature request for a proxy for the top nav menu.

[jzayac]

Did anyone find or provide a solution as to how to achieve the following header layout? My manager is asking me to set ours up like this:

If anyone knows, can you please provide details as to where exactly the text needs to be added, as well as the script itself?

[WriterAndrew]

Did anyone find or provide a solution as to how to achieve the following header layout? My manager is asking me to set ours up like this:

If anyone knows, can you please provide details as to where exactly the text needs to be added, as well as the script itself?

I know that this post is a few years old now, but did anyone ever find a way to achieve this "Logo > Horizontal Menu > Searchbar" in a single row for the HTML5 TopNav layout? Its exactly what my Designers are asking for in our current rebranding!

Thanks

[NorthEast]

I know that this post is a few years old now, but did anyone ever find a way to achieve this "Logo > Horizontal Menu > Searchbar" in a single row for the HTML5 TopNav layout? Its exactly what my Designers are asking for in our current rebranding!

Thanks

The content in the header are all flex elements, so you may be able to do it using CSS.
This is a good guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For example, in the desktop layout, I managed to get everything in one row by tweaking the CSS:

Code: Select all

.navigation-wrapper
{
	justify-content: flex-start; /* justify menu to left instead of right */
	
}

.nav-search-wrapper
{
	flex-basis: auto; /* set search width to auto instead of 100% */
}

This was a very quick test, so may need some refinement, but you get the idea.

You'll need to handle the reponsive tablet and phone layouts separately, if you want to modify those too.

[WriterAndrew]

Many thanks, Dave, that was most helpful.

However, as is always my experience with Flare and templates - fix one problem, reveal another!

I have set up the Top-Nav header so that on my content pages, each of the three components (Logo, Horizontal menu, and Search) are nicely aligned. However, on the Home page, these components step down from left to right (so the Logo is in the right place, the menu is a bit too low, and the search is much too low.)

Using the Chrome Devtools, I've found the .nav-search setting, but if I set the margin-top setting so that the search bar on the home page moves up to the correct place, that same setting then pushes the search bar on the content pages up above the top of the browser window.

How can I apply a setting to only the home page version of the search bar, without moving the content page versions?

Thanks

[ChoccieMuffin]

You might want to have two separate stylesheets - one for home page and one for other topics (that's how various topnav templates do it - I use Soledad).

Or have something like "html.home .navigation-wrapper" etc defined in your stylesheet to get the spacing as you want it.

[NorthEast]

Many thanks, Dave, that was most helpful.

However, as is always my experience with Flare and templates - fix one problem, reveal another!

I have set up the Top-Nav header so that on my content pages, each of the three components (Logo, Horizontal menu, and Search) are nicely aligned. However, on the Home page, these components step down from left to right (so the Logo is in the right place, the menu is a bit too low, and the search is much too low.)

Using the Chrome Devtools, I've found the .nav-search setting, but if I set the margin-top setting so that the search bar on the home page moves up to the correct place, that same setting then pushes the search bar on the content pages up above the top of the browser window.

How can I apply a setting to only the home page version of the search bar, without moving the content page versions?

Thanks

If your home page looks different to the content pages, then you need to find out why first.
Do the home page and content pages use different CSS?

[WriterAndrew]

Dave,
As far as I can tell, the content pages seem happy to take the header definitions from the .css files. I have a contentHeader.css file, and any changes I make in it are reflected in the output.
However, for the Home page, Flare seems intent on taking all info from the Top-Nav skin, rather than from a stylesheet. THe Top-Nav skin seems to be missing some parameters - for example, the height of the header title-bar (and adding a height parameter then gets ignored when you rebuild the project.)
I'm sure there must be an easy way to fix this, but I've been going round in circles so much that I can't see it!

[WriterAndrew]

Progress! I've found an entry in my home page html:

Code: Select all

MadCap:onlyLocalStylesheets="True">

Changing this to

Code: Select all

MadCap:onlyLocalStylesheets="False">

and the Header appears the same for Home and Content pages. Result.

(But in true Flare style, I now have to re-style all the homepage content as making the above change results in the main content area changing...)

1 step forward...