Anchor Links Not Working

Beaver Builder
1

Hi there,

I have set up anchor links in the images of callout modules on the top of the page to link to different headers further down the page.

I have set up links in the callout modules as follows: #Example

I have the linked this with the ID in the heading section as follows: Example

I have two different headers, one for small and medium devices, and one for large devices. It seems to be working fine in mobile but I’m having trouble getting it to work in desktop. It worked originally but now has just stopped working, and each image just slightly hovers further up the page (not towards the desired sections). I’ve checked and all the information is exactly the same for each header (mobile and desktop).

Can anyone help?

Thanks,
Natalie

2

Hi Natalie,

It sounds like from your description you’re using the #Example ID more than once i.e. one for desktop, one for medium and another for small devices. If this is the case, this is what is causing the issue as an ID should be unique on the page meaning it should be used once.

Using an ID more than once especially for internal links will confuse the browser as it will not know what ID navigate to.

The best course of action would be to use different ID’s for each device and then use multiple header modules which each use the ID for that particular device. When you do this, it should resolve the issue. :slight_smile:

1 Like