Fixed topic menu: menu does not always stick (remain fixed)

mfaux · Post by **mfaux** » Mon Feb 04, 2019 6:09 am

Does anyone else have problems with fixed topic menus (aka sticky menus)? Sometimes the topic menu is fixed as expected, other times it scrolls with the page content.

The below gif shows both behaviors. I refresh the page a couple of times and test how the topic menu renders.

I've also posted this on madcapflareusergroups.slack.com.

mfaux · Post by **mfaux** » Mon Oct 21, 2019 2:09 am

I continue to have this problem. Anyone else?

aneedell · Post by **aneedell** » Wed Mar 10, 2021 10:42 am

I'm having lots of problems trying to get a fixed topic menu to work. My master page places the menu proxy in a div, floating right. It works fine until I configure it to be fixed. Then, as soon as I start to scroll, the menu jumps to the far right and I can only see the menu's left edge. To see it all, I need to scroll horizontally, and that's not at all useful. I tried setting the menu proxy to float left, but as soon as I start to scroll, the text ceases to wrap around the menu: that is, the menu hides the content. Both are unacceptable, so I have abandoned this effort. I'm sure that it is do-able, but there are too many moving parts here and I'm just guessing at possible solutions. Wish I could help you, but I can only commiserate.

scap · Post by **scap** » Wed Sep 13, 2023 11:13 am

Anyone manage to get a sticky topic contents menu on the right side of the topic working?

Post by **NorthEast** » Thu Sep 14, 2023 12:30 am

Yes, I have a sticky panel on the right side of my topics.

There's a sticky panel on the right in the main Web view, and the panel content is un-stuck and displayed at the top in the responsive tablet/phone views.
I use a Side Nav skin.

Anyway, this is the template page:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
</head>
<body>
	<div class="layout-two-columns">
		<div class="layout-topic-panel">
			<MadCap:menuProxy style="mc-toc-depth: 3" mc-linked-toc="$topicHeadings" />
		</div>
		<div class="layout-topic-main">
			<MadCap:breadcrumbsProxy />
			<MadCap:bodyProxy />
		</div>
	</div>
</body>
</html>

This is the CSS:

Code: Select all

div.layout-two-columns
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5%;
}

div.layout-topic-main 
{
    flex: 0 1 auto;
	order: 1; /* display topic-main first (left), before topic-panel */
    width: 70%; /* total width of 70% main, 25% panel, 5% gap = 100% */
    overflow: auto;
}

div.layout-topic-panel 
{
    position: sticky;
    top: 2rem; /* sticky offset from top of screen */	
    flex: 0 1 auto;
    order: 2; /* display topic-panel second (right), after topic-main */
    align-self: flex-start;
    width: 25%;
}


@media tablet
{
	div.layout-topic-main
	{
		order: 2; /* display topic-main second (bottom), after topic-panel */
		width: 100%; /* fill width when single column */
	}

	div.layout-topic-panel
	{
		position: relative; /* not sticky */
		top: 0; /* remove sticky offset */
		order: 1; /* display topic-panel first (top), before topic-main */
		width: 100%; /* fill width when single column */
	}
}

Notes:

(1) The panel (layout-topic-panel) is listed first in the HTML for accessibility reasons, so that the navigation (menu proxy) in the panel is accessed first using a keyboard. The actual order/position they're displayed on screen is controlled by the 'order' in the CSS.

(2) Getting sticky position to work in tablet/phone views is not simple, which I think is due to the MadCap/Foundation CSS used in those views. Various things can prevent sticky positioning from working - see https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working.

jimgilliam · Post by **jimgilliam** » Mon Oct 16, 2023 4:58 pm

@NorthEast, what is the $topicHeading in your example? Is it a reference to using "Headings" in the menu proxy, or a variable or script you're using on the proxy?

Post by **NorthEast** » Mon Oct 16, 2023 10:53 pm

jimgilliam wrote: ↑Mon Oct 16, 2023 4:58 pm @NorthEast, what is the $topicHeading in your example? Is it a reference to using "Headings" in the menu proxy, or a variable or script you're using on the proxy?

When you choose (Headings) for the menu proxy, Flare inserts the bit mc-linked-toc="$topicHeadings".

MadCap Software Forums

Fixed topic menu: menu does not always stick (remain fixed)

Fixed topic menu: menu does not always stick (remain fixed)

Re: Fixed topic menu: unpredicatble rendering

Re: Fixed topic menu: menu does not always stick (remain fix

Re: Fixed topic menu: menu does not always stick (remain fixed)

Re: Fixed topic menu: menu does not always stick (remain fixed)

Re: Fixed topic menu: menu does not always stick (remain fixed)

Re: Fixed topic menu: menu does not always stick (remain fixed)