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.