Anchor Points Hidden Under Header

Hi

I have set some class ID’s on the Elementor inner section Advanced tab so that I can create a one page navigation.

When I click on a link from the left side floating menu, the page jumps as expected but it is chopped off by the floating header. I’m going to be using the plugin with a lot of anchors so applying code to a few of them would work in most cases if I had a small bunch of anchors, but this won’t necessarily work in my case as I’ll have many.

Many thanks

Will
https://thesurgenetwork.net

Hello there,

To fix it, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width: 1025px) {
  #introduction,
  #founders,
  #hero-history,
  #sonic-history,
  #timeline {
    margin-top: -90px;
    padding-top: 90px;
  } 
}

To know what this code does, try adding a temporary border.

@media only screen and (min-width: 1025px) {
  #introduction,
  #founders,
  #hero-history,
  #sonic-history,
  #timeline {
    margin-top: -90px;
    padding-top: 90px;
    border: 1px solid red; 
  } 
}

Regards,
Kharis

Hi Kharis

Is there anyway of applying more generic code that will affect future anchor points I make? In other words can you target all anchors rather than them individually?

Kind regards

Will

Hello Will,

We need this code only if the header menu bar is floating. Because it takes several pixels space on top of the screen. Unfortunately there’s no other easier code than CSS solution I proposed.

Regards,
Kharis

Would any of the code fixes on this website work below?

Does the Sydney Pro theme have an anchor element?
I found some code

.anchor { 
display: block!important; 
height: 100px!important; 
margin-top: -100px!important; 
visibility: hidden; 
}

Some people have suggested adding a class which can be easily done in Elementor. Then this class can be targeted with CSS similar to the above.

Kind regards

Will

Hello Will,

You can use section’s CSS class name for each anchor target.

02

Based on the given custom class name as seen on the screenshot above, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .anchor-target {
        margin-top: -90px;
        padding-top: 90px;
      } 
    }

Each time you make a new section, you’ve define anchor-target CSS class. No need to do CSS code adjustment as I suggested to you before.

Regards,
Kharis

Hi Kharis

This works extremely well.

I will point out for others who have this problem, make sure you try this out on a different web browser or use a private window/incognito mode so that your are not logged into your website. The admin bar is visble whilst logged in, hence the margin and padding will be out by 35px.

Thank you Kharis

Kind regards

Will

To add more extra space only while the admin bar displaying, you can use this code:

    @media only screen and (min-width: 1025px) {
      .anchor-target {
        margin-top: -90px;
        padding-top: 90px;
      } 
      .admin-bar .anchor-target {
        margin-top: -125px;
        padding-top: 125px;
      }   
    }

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Ah didn’t think of targeting the admin bar. That works perfectly.

Thank you Kharis!

Kind regards

Will

You’re welcome Will!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Sorry to bring this problem up again but I’m getting some odd behaviour with the anchor points. Please see my video for a demonstration

Anchor Problem

Kind regards

Will

Hello Will,

Have you tried reducing the values of margin top and padding top?

    @media only screen and (min-width: 1025px) {
      .anchor-target {
        margin-top: -90px;
        padding-top: 90px;
      } 
      .admin-bar .anchor-target {
        margin-top: -125px;
        padding-top: 125px;
      }   
    }

Regards,
Kharis

From testing from my mobile, refreshing the page from already loaded page that contains anchors set on that page, the the anchor point is chopped off. Now if I click in the address bar and press enter the anchor point loads properly.

Hello there,

Some elements above the current section might be not loaded immediately because of larger size. This usually happens on slides and images. The current section is miss-placed due to unfinished load of other elements. This is natural behaviour of web browsers. Couldn’t you accept it?

Regards,
Kharis

Hi Kharis

I’ve re-enabled a floating menu bar that constantly sits on the left side of the website and clicking the second to bottom button takes me to the ‘The Brief History’ header perfectly without any problems. However, under the hamburg/mobile menu if I click the ‘Brief History’ under ‘About Us’ the gap is apparent. I don’t understand what’s going on. The custom link under Customize > Menus for the floating menu and the theme menu are absolutely identical.

Any suggestions?

Kind regards

Will

Any more ideas Kharis?

Hello there,

You might have reduce the space only on the screen width below 1025px. Try this code:

    @media only screen and (max-width: 1025px) {
      .anchor-target {
        margin-top: -60px;
        padding-top: 60px;
      } 
      .admin-bar .anchor-target {
        margin-top: -85px;
        padding-top: 85px;
      }   
    }

Regards,
Kharis

I’ve been looking at other forum posts where others have had issues getting the anchor to shift when there is a fixed header in place.

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

I’ve set the section in Elementor with the .anchor-target class and using the code above especially the visibility option hides the Elementor sections. However, lots of forums posts use this option but surely it isn’t used to the content that actually want to show, so how have they used it?

Whilst already being on the ‘About Us’ page and clicking on an anchor point that navigates further down that page, the margin-top and padding-top properties don’t seem to make any difference. I have cleared the cache and tweaked the code as I’m viewing the page but I can’t seem to get it to work.