how to block h1 from in-topic toc

[IPRO_JB]

Hi All,

I have a HTML5 project I'm working on. The target is a top-nav style target. I've inserted a menu proxy and set the menu content to use "Headings". I'd like to block the h1 from the menu proxy so that my TOC only shows h2, h3, and h4. I know print output supports the use of the mc-heading level. If I were to set it to 0 then the h1 wouldn't be included in the in-topic toc. Is there similar functionality for web output? Any help would be super.

[NorthEast]

There's no similar method to exclude particular heading levels from a 'Headings' menu proxy. The only option is to set the heading level depth in the menu proxy, so you can't stop Flare including the h1.

But you can use CSS to hide menu levels in the output.

For example, this hides the h1 heading from the 'Headings' menu:

Code: Select all

ul.mc-component[data-magellan] > li 
{
    display: none;
}

The CSS works by targetting the first level of list items in the menu and hiding them.

If you inspect the output in the browser (using F12 dev tools), you can see the menu is a list (<ul>) with list items (<li>).

Code: Select all

<ul class="nocontent _Skins_YourSkinNamekinname mc-component" ... data-magellan="xxx">
  <li><a>H1 heading

The important bit of the CSS is to make sure you specifically target that particular type of menu, so you don't hide menu items from other menu proxies by accident (if you use them). That's why I specified that it has both a mc-component class and contains a data-magellan attribute. You could alternatively just specify the output skin name in the class (_Skins_YourSkinNamekinname), if your skin is used only for that menu proxy.

[IPRO_JB]

Thank you so much for your reply. So, I am using the same Menu Proxy in two places, one set to "Headings" and the other set to TOC. But, I could create a second Menu Proxy and use the one I already have for Headings and the new one for TOC menu proxy. If my Headings menu proxy skin was named menuproxy_headings, would I put this in the CSS?

ul.mc-component[menuproxy_headings] > li
{
display: none;
}

I'm pretty sure that's not correct, but any guidance you have would be super.
Thank you again for the help!

[NorthEast]

The skin name is used in the class name of the list, in the format _Skins_<your skin name>.

So I'd guess yours would be...

Code: Select all

ul.mc-component._Skins_menuproxy_headings > li
{
display: none;
}

As mentioned though, if you inspect the output in the browser (using F12 dev tools), you can see the menu list (<ul>) and its class name to use in the CSS.

[KatherineMunro]

When I tried the solutions above, I found that my menu proxy displayed no items at all. At least with Flare 2024, menu proxy sub-items are nested within the top-level LI structure, which we had set to not display, and that might explain it.

I had also tried the idea of setting mc-heading-level to 0 for H1 (but overridden with mc-heading-level set to 1 for print so that my PDF TOCs still work) and was dismayed when I realised that my HTML5 cross references were all using the first subheading as the target link text.

My solution was to exclude the first child list item in the list, because like several other people, I don't see the point of linking to the topic's own top-level heading in the menu proxy.

Code: Select all

ul.menu.mc-component > li:first-child
{
    display: none;
}

ul.menu.mc-component li
{
    display: list-item;
}

Excluding that top-level list item leaves extra padding on the left of the remaining list items. I used the menu component skin editor to reduce the default cascading left padding indentation by 20px for each list item level. (1st Level is has the "PaddingLeft" property set to 0px; 2nd Level to 20px, and so on.) However, the component skin editor only handles H1-H5. Just in case any of our team have a H6 heading in their content, I've added this CSS into my stylesheet so that H6 doesn't have the same indentation as H5.

Code: Select all

ul.menu.mc-component li li li li li li
{
    padding-left: 20px;
}

[NorthEast]

When I tried the solutions above, I found that my menu proxy displayed no items at all. At least with Flare 2024, menu proxy sub-items are nested within the top-level LI structure, which we had set to not display, and that might explain it.

Yep, MadCap changed the tag structure of the menu proxy in Flare 2024R1, so my previous example only works to 2023R2. You could get it to work for all Flare versions including 2024 with a slight change:

Code: Select all

ul.mc-component[data-magellan] > li:first-child
{
    display: none;
}