In-page anchors obscured by menu on desktop

<h2>Example heading</h2>”
(without the “ ”  I can’t see the heading)

Which part of the page are you referring to? Are you saying the heading can’t be seen at all without adding a break? If so, can you give me an example?

The only thing I see are a lot of breaks in between some of the sections. There’s probably too many showing up. I would handle those parts a bit different by adding a div with it’s own custom Class. Then the div spacing can be adjusted for mobile and desktop browsers depending where it’s being viewed from.

Ah, ok now I see what you mean.

This is an issue that all developers go through when using a site with a Sticky Menu that also has anchors inside the content.

It’s an easy fix if you have separate sections with plenty of space in between like the 1st and second widget on the SquareOne theme (click the arrow/circle) – http://demo.appfinite.net/squareone/ Notice the arrow links to the 2nd Blue widget area and there’s already enough space in between the title and widget.

Since you’re needing this to work with just Text by itself, it’s a bit different. Here’s some code I came up with that seems to work –

<a name="1"></a>
<h1 class="anchor-space">Your Anchor Title</h1>
<p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>

I added the above code to the HTML, and then I added this to the CSS –

.anchor-space {
    margin-top: -110px;
    padding-top: 110px;
}

This is the result once I click the anchor/link – https://i.imgur.com/PoxXwbJ.png

Keep in mind, the Sticky Menu won’t show up on Mobile devices, so you won’t have to worry about this issue on Mobile Phones or tablets. I would just focus on decreasing some of the space if there’s too much when viewed on mobile.

Let me know if that works.

I just tested again and it works perfectly for me. You can add the CSS wherever you want. I usually either add it to the style.css or the Custom CSS page in the Customizer.

I would make sure that your code is consistent and organized or it won’t show up properly.

Here’s exactly what I added –

<a name="1"></a>
<h1 class="anchor-space">Your Anchor Title 1</h1>
<p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>

<a name="2"></a>
<h1 class="anchor-space">Your Anchor Title 2</h1>
<p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>

<a name="3"></a>
<h1 class="anchor-space">Your Anchor Title 3</h1>
<p>Your regular paragraph text goes here. Your regular paragraph text goes here. Your regular paragraph text goes here.</p>

…and then this was added to the CSS –

.anchor-space {
    margin-top: -110px;
    padding-top: 110px;
}

Give that a try, and if it works then go back and reorder your code so it looks similar. Or you can wrap each section in their own div to be more organized.