In-page anchors obscured by menu on desktop

Tagged: anchors menu space

This topic has 5 replies, 2 voices, and was last updated 5 years, 7 months ago by Wes.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
October 6, 2017 at 4:36 am #22006

dave
Customer

Hi – I’ve had to add the following code to the anchors to get them to show up properly in a browser, but this obviously means too much space when viewing on a mobile.

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

You can see an example of this in action on:
http://axis-finance.com/sipps/

Not sure if this is a Genesis issue or an Aspire issue, but it’s causing us some difficulty.

Yours
David

October 7, 2017 at 3:40 pm #22010
Wes
Moderator
```
<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.
October 16, 2017 at 10:24 am #22025
dave
Customer
Hi Wes – thanks for looking at this for me.

I’m actually referring to any of the anchors on the page. If I use the following code I don’t see the heading “The Self Invested Personal Pension (SIPP)” below the menu bar as it is obscured by the menu bar itself:
```
<ol>
 	<li><a href="#1">The Self Invested Personal Pension (SIPP)</a></li>
 	<li><a href="#2">International SIPPs</a></li>
</ol>
<a name="1"></a>
<h2>1. The Self Invested Personal Pension (SIPP)</h2>
```
but if I add the following code, then I do see the heading below the menu bar:
```
<ol>
 	<li><a href="#1">The Self Invested Personal Pension (SIPP)</a></li>
 	<li><a href="#2">International SIPPs</a></li>
</ol>
<a name="1"></a>
<br />&nbsp;
<h2>1. The Self Invested Personal Pension (SIPP)</h2>
```
I was hoping that the addition of something like a margin-top= in the css would resolve this, but I’m loathe to play about too much as I don’t want to break other things.

If you let me know where I should be adding the div classes, I’ll happily do so.
October 19, 2017 at 2:42 am #22041
Wes
Moderator
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.
October 19, 2017 at 3:44 pm #22045
dave
Customer
Hi – I’ve just tried implementing this but it doesn’t seem to have changed anything. I’ve probably put the code in the wrong file or some such thing. What I did was update /wp-content/themes/aspire-pro/style.css as follows:
```
/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 20px;
}

h1 {
	font-size: 36px;
	font-size: 3.6rem;
}

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

h2 {
	font-size: 30px;
	font-size: 3rem;
}

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

.image-section h2,
.solid-section h2 {
	font-size: 54px;
}
```
and made the anchor sections look as follows:
```
<a name="1"></a>
<h2 class="anchor-space">1.  QROPS definition</h2>
```
Have I updated the wrong css file?

Thanks again for all your help.
October 19, 2017 at 8:34 pm #22047
Wes
Moderator
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.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.