Hiding heading anchors breaks sidebar navigation

[n1313]

I don't like the way new heading anchors look like so I have hidden them by modifying styles in the config:

    Heading: {
      anchor: {
        display: 'none'
      }
    }

and now the sidebar navigation is broken (because it expects the anchors to be present and visible on the page. This is beta 13.

/cc @okonet

[okonet]

Can you elaborate on what is broken and how it expects it to be present?

[n1313]

Anchor navigation works by scrolling the viewport to the location of the referenced element. If the referenced element is not displayed on the page (because it has display: none) then its location is not defined and there is nowhere to scroll to. Thus, hiding the anchor elements breaks the sidebar navigation: clicking on the menu items does nothing because there is no element to scroll to.

[okonet]

Makes sense. We should move id to the header or section element to fix this. Mind doing this?

[n1313]

Ok, no problem. By the way, the anchors themselves don't look too good on narrow screens, they are a little bit off-screen, but I'm not going to fix that since I don't know what would be a good solution.

[sapegin]

Also position is a bit strange on my style guide. Haven’t have time to investigate why:

[okonet]

We could move anchors to the end of the headings — Button #. Right now they are positioned absolutely.

@sapegin this is "by design" — tried to align them to the baseline but it seems a bit off in your case indeed.

[sapegin]

Probably because we use corporate font in style guide.