Anchors get hidden behind the fixed menu bar

Support
#1

Hi, would you please help me?

I am currently changing my footnote anchors to include the popup shortcode in an effort to make reading long articles with lots of footnotes easier, however, I still want to include the scroll to the footnote feature.

I had been using the Scroll to Anchor plugin to offset the anchor position to compensate for the header, but this doesn’t seem to work with the popup shortcode. I want to use the popup shortcode, is there some JS or CSS I can use that will offset the anchor to compensate for the header?

The page I am testing this on is: https://hymnsocietygbi.org.uk/1971/01/11/treasure-no-35-hymn-writing-today/ the footnote anchors are halfway down the page.

Thanks in advance.
Ken

edit this is the code I’m using for the anchors:

Anchor in text:

[extra id="ref1" href="#fn1" title="Footnote 1" info="popover" info_place="top" info_trigger="hover" info_content="Text of footnote"]<sup>[1]</sup>[/extra]

Anchor in Footnote:

[extra id="fn1" href="#ref1" title="Footnote 1" info="popover" info_place="top" info_trigger="hover" info_content="Jump back to footnote 1 in the text."]<sup>1.</sup>Text of footnote goes here[/extra]

I’ve tried adding class=“anchor” and adjusting padding in the CSS but this has only moved the ‘sup’ number, not the scroll.

I’m sure it’s something really simple but it has me foxed.

#2

Hi Ken,

Since the scroll function is handled by the Scroll to Anchor plugin, it would be best to consult the plugin developer on how to set an offset value for the fixed header. Regretfully, we cannot provide support for third party plugins or scripts as our support policy states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

#3

Hi Lely,

Yes, I understand, thanks.

The only reason I installed the Scroll to Anchor plugin was that I couldn’t figure out a way to do this solely in X (now using Pro but still the same problem). As the plugin has not been updated for WP 4.8 I decided to uninstall and try another plugin - Page Scroll to ID which works fine.

#4

Glad everything is working fine now.

#5

everything doesn’t work fine. Anchors scroll behind sticky headers, which is an issue with Pro, that shouldn’t need a plug in to be fixed.

#6

Totally agree with you. There should be a fix to Pro that compensates for anchors being hidden behind sticky headers.

#7

Glad I’m not alone in thinking that. When Pro become more that a Header/Footer thing, hopefully these things will be fixed. I avoided add another plugin to my site with this.

I added this to my Global CSS:

a.sticky {
display: block;
position: relative;
top: -60px; /* height of header or more in want padding */
visibility: hidden;
}

This used this class=“sticky” on the anchor, i.e.

#8

Thanks, that’s great!

1 Like
#9

Thanks for sharing @theapricot.

#10

Sorry @theapricot but this doesn’t work on menu’s for single page navigation. Is there a work around theme.co? My custom header in Pro still covers the content where the anchor is installed.

#11

@samuelstacey it works fine for me, I just did it a test. Could you share a link or the exact code you are using?

#12

Hey @samuelstacey,

Thanks for writing around. Can you please provide the URL of your site so we can take a look at your setup?

Thanks!

#13

Thanks @Nabeel, the URL is: http://www.rtb.cgiar.org/2016-annual-report/

I’m using the same code above with a -100px top margin, and applied the ‘sticky’ class to the custom menu items. I’m using the new Pro customiser for the header which may change the process slightly.

Thanks for your help!

#14

Hey @samuelstacey,

Thanks for providing the url. You have a different set up. They are referring to anchor links added in the contents area. And you meant something else which is in your custom header. One page navigation is currently not supported in custom header. Our developers is already aware and fixing this issue. It might be integrated and rolled out in the next update release.

Thank you for your understanding.

#15

HI @samuelstacey

Just had a look at your page, you can make it work. I just did it in firebug and it was fine.

At the moment the have the id tag out of place. it is up here. (need to remove this id)

<div id="people" class="x-section bg-image"....

Further down you have your title
RTB people

Inside the title area (are you using Cornerstone?), rather typing “RTB people” put RTB people"

sticky as a class will cause issues so stickytop will work. Then in the global css put

.stickytop {
display: block;
position: relative;
top: -100px; /* height of header or more in want padding */
visibility: hidden;
}

#16

Good Suggestion @theapricot!

@samuelstacey, Please let us know how it goes.

1 Like
#17

Is one page navigation fixed in pro custom header builder now? If not, projected timeline?

I was having issues with anchor links not working (using off canvas mobile menu). You push the link and the pop-out menu window isn’t closing.

I was searching for help and found this thread from August.

#18

Hi @splaquet,

Thanks for writing around! Unfortunately, as of the moment, one page navigation is not yet supported in Pro. We have already added this in our issue tracker, we don’t have an ETA yet but for the menu closing part, this should help you as well https://theme.co/apex/forum/t/collapsed-navigation-menu-closing-after-click-unless-its-a-sub-menu-heading/15070/5

Hope this helps!