Top Navigation - Anchor Top Menu

[NUmarcus11]

Good afternoon all! I have been working with the HTML5 Top Navigation output for a web help project that I am working on. I like a lot of the functionality that you can pack into the new HTML5 Top Navigation output. My question concerns the Top Menu that resides at the top of the screen. Is there a way to anchor that menu so that it will remain at the top of the screen as I scroll down through the content populating the page? Essentially, I want it to remain visible as I scroll down a page so that a user could access the menu to move to another section without having to return to the top of the page/window.

Thank you for your time.

[NorthEast]

Is there a way to anchor that menu so that it will remain at the top of the screen as I scroll down through the content populating the page? Essentially, I want it to remain visible as I scroll down a page so that a user could access the menu to move to another section without having to return to the top of the page/window.

MadCap didn't provide an option/setting to do this in their skin.

It should be possible, but it's only something I'd look at if you are happy working with CSS.

For example, to get you started, you could:
* Set the navigation bar position to fixed.
* Set its z-index so that it appears on top of text.
* Include a top margin on the section which contains the topic body, so it's not hidden by the navigation header.

Code: Select all

nav.tab-bar 
{ 
	position: fixed;
	z-index: 10;
	width: 100%;
}

section.main-section
{
	margin-top: 120px;
}

That's just a suggestion though - in practice, you will probably need to do a lot more to get it working properly.

[Psider]

DISCLAIMER: These were issues with a particular flavour of Robohelp output (<ducks for cover>). Possibly both are irrelevant for Flare output. But it doesn't hurt to check.

Potential gotchas:

* Hyperlinks to anchor tags - the destination of the link displays at the top of the browser window, which may be underneath your non-scrolling section.
I managed to solve this (in Robohelp) by creating a special selector that sets padding-top to the height of my non-scrolling region.

Code: Select all

a[name] {padding-top: [your-size]px;}

* Hyperlinks from search results when highlighting is enabled - when highlighting is on, the page will scroll so that the first highlighted term is at the top of the screen. This may be underneath your non-scrolling region. In Robohelp there was no easy fix - it required editing output javascript.

[Nita Beck]

MadCap has posted a knowledge base article on how to create a non-scrolling top nav header: http://kb.madcapsoftware.com/Content/Mi ... Header.htm

[sdcinvan]

MadCap has posted a knowledge base article on how to create a non-scrolling top nav header: http://kb.madcapsoftware.com/Content/Mi ... Header.htm

Thank you Nita.

Unfortunately, I have have no success in making this work. The top nav header still scrolls away. Anyone?

[NorthEast]

MadCap has posted a knowledge base article on how to create a non-scrolling top nav header: http://kb.madcapsoftware.com/Content/Mi ... Header.htm

Thank you Nita.

Unfortunately, I have have no success in making this work. The top nav header still scrolls away. Anyone?

What have you actually tried?

The CSS in that knowledgebase article works fine for me, I just copied and pasted it in my stylesheet.

[sdcinvan]

MadCap has posted a knowledge base article on how to create a non-scrolling top nav header: http://kb.madcapsoftware.com/Content/Mi ... Header.htm

Thank you Nita.

Unfortunately, I have have no success in making this work. The top nav header still scrolls away. Anyone?

What have you actually tried?

The CSS in that knowledgebase article works fine for me, I just copied and pasted it in my stylesheet.

My mistake, the link in Nita's post works perfectly. I think I was having an off-day. Thanks for your reply Dave.

It really is a simple matter of adding the css to the web media output section of the Flare stylesheet.

From http://kb.madcapsoftware.com/Content/Mi ... Header.htm, the code is:

Code: Select all

/* Keep the header from scrolling off the page using absolute position */
.tab-bar
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
}
/* Add scroll bar to Body and absolute position to prevent body from scrolling behind header */
.main-section
{
	overflow: auto;
	position: absolute;
	width: 100%;
	top: 127px;
	bottom: 0;
}

/* Header height changes when media is used, adjust the top position of the body to match  
Also need to change the width to match the skin settings in the target*/
@media screen and (max-width: 1278px) 
{
	.main-section
	{
		overflow: auto;
		position: absolute;
		width: 100%;
		top: 104px;
		bottom: 0;
	}
}

[sforsyth]

This is a great post, but my page had a small bug when I followed the instructions in the KBA.
If I viewed my page in Safari on a mac, and then zoomed out, the browser displayed white space in the bottom half of the browser instead of displaying more content. So, zooming out would make the content smaller, but it wouldn't show you any content that you couldn't already see.

I researched some other ways of making static top nav bars, and found that the following code seems to work on all of my browsers, even when I zoom.

This code just styles the .tab-bar, and you don't need to style the .main-section. It uses position:fixed instead of position:absolute, and uses the z-index to bring the content to the top. Basically, it fixes the tab bar to the top of the page and brings it in front of everything else, so the rest of your content just scrolls along behind it.


.tab-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 95px;
}

[sforsyth]

This code just styles the .tab-bar, and you don't need to style the .main-section. It uses position:fixed instead of position:absolute, and uses the z-index to bring the content to the top. Basically, it fixes the tab bar to the top of the page and brings it in front of everything else, so the rest of your content just scrolls along behind it.

You don't need to style the .main-section, but you will probably need to add some padding to the top of the content to push it down the page so it isn't sitting underneath the toolbar. (In the master page, I wrapped the entire body content in a div class "mainContainer" and then just styled mainContainer in my CSS to have padding-top: 95px;)

[sdcinvan]

This is a great post, but my page had a small bug when I followed the instructions in the KBA.
If I viewed my page in Safari on a mac, and then zoomed out, the browser displayed white space in the bottom half of the browser instead of displaying more content. So, zooming out would make the content smaller, but it wouldn't show you any content that you couldn't already see.

I researched some other ways of making static top nav bars, and found that the following code seems to work on all of my browsers, even when I zoom.

This code just styles the .tab-bar, and you don't need to style the .main-section. It uses position:fixed instead of position:absolute, and uses the z-index to bring the content to the top. Basically, it fixes the tab bar to the top of the page and brings it in front of everything else, so the rest of your content just scrolls along behind it.

Thanks for the great addition!

[Nita Beck]

My mistake, the link in Nita's post works perfectly. I think I was having an off-day. Thanks for your reply Dave.

You know, the irony here for me is that *I've* never gotten the code in the KB article to work. Maybe I'm having an off-forever! I'll have to revisit this myself...

[sdcinvan]

My mistake, the link in Nita's post works perfectly. I think I was having an off-day. Thanks for your reply Dave.

You know, the irony here for me is that *I've* never gotten the code in the KB article to work. Maybe I'm having an off-forever! I'll have to revisit this myself...

Nita, for me... it may have been an off-day but I swear, the first time it didn't work. But Monday morning it did work - with no edits!

My guesses:
- Off day
OR
- A not-so-unusual anomaly with GPL (Global Project Linking) - Because those sorts of edits occur on the global copy... sometimes the updating (Auto Sync Import) doesn't work the first or second time and requires up to three builds.

OT: Whoa! What's with the message, You cannot make another post so soon after your last.??? That's ridiculous! I'm obviously not going to SPAM the site! How long must I wait? It's already more than 5 minutes since my last post. It's almost 8PM and I really want to send this AND GO HOME.

[Nita Beck]

Sorry about the restriction about how soon you can post after a prior post. The forums were hit really hard by spammers about a month ago over a weekend and many of us MVPs spent many hours chasing after them over that weekend and well into the next week. Meantime, MadCap tightened the controls so we wouldn't again experience those kinds of attacks. I appreciate your frustration but please be patient. ...

[ChoccieMuffin]

OT: Whoa! What's with the message, You cannot make another post so soon after your last.??? That's ridiculous! I'm obviously not going to SPAM the site! How long must I wait? It's already more than 5 minutes since my last post. It's almost 8PM and I really want to send this AND GO HOME.

Yeah, I've had that too. Thought it was something I'd done.

[sdcinvan]

Sorry about the restriction about how soon you can post after a prior post. The forums were hit really hard by spammers about a month ago over a weekend and many of us MVPs spent many hours chasing after them over that weekend and well into the next week. Meantime, MadCap tightened the controls so we wouldn't again experience those kinds of attacks. I appreciate your frustration but please be patient. ...

No worries Nita. It was really late and I wanted to get home.

However, it would be nice if there was a way to apply that time/post restriction to only accounts under a certain age and/or point level.

[BedfordWriter]

Sorry for adding an update so long after the original conversation, but I was struggling with this today. Sometimes, it's the smallest things that make a difference.
An earlier post said:
It really is a simple matter of adding the css to the web media output section of the Flare stylesheet.

That slowed me down for a while. First, the "Flare stylesheet" in question is in fact Styles.css in the \Content\Resources\StyleSheets folder. Only obvious after you know.

Second, I could not get it to work when adding this within the @media non-print section (the closest thing that I could find to a "web media output section"). But, when I dropped the code into the beginning of my Styles.css file, before *everything* else, it worked exactly as advertised. I had to adjust the values for top: to suit, but that was easy work.

[Nita Beck]

Second, I could not get it to work when adding this within the @media non-print section (the closest thing that I could find to a "web media output section"). But, when I dropped the code into the beginning of my Styles.css file, before *everything* else, it worked exactly as advertised. I had to adjust the values for top: to suit, but that was easy work.

(Hey, I know you!)

The "web media output section" IS the default medium. I doubt that many of us ever need the non-print medium. When I train new Flare users, I tell them not to use it.

[arshabhirai]

My content disappears when I resize the window. Did anyone have any issues when resizing the page or it's responsiveness?

[arshabhirai]

Found a solution:

Changed position from absolute to relative and added a display attribute.

Code: Select all

.tab-bar
{
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
    display: block !important;
}

[Martin_B]

Does anyone know how to make this responsive?

[Nita Beck]

Does anyone know how to make this responsive?

If you are using Flare 2017 r2, a Top Nav header that is both fixed and responsive can now be achieved through the Flare UI.

Read more here: http://help.madcapsoftware.com/flare201 ... Header.htm

If you are using an older version of Flare, I don't have a solution myself. Perhaps others who do more customization than I will have an idea.

[Martin_B]

If you are using Flare 2017 r2, a Top Nav header that is both fixed and responsive can now be achieved through the Flare UI.

Read more here: http://help.madcapsoftware.com/flare201 ... Header.htm

If you are using an older version of Flare, I don't have a solution myself. Perhaps others who do more customization than I will have an idea.

Nita, you're a god damn angel, thank you!