Anchor point problem

[Lyser]

Hello,
what i try to do is this menu on the left of this page : https://www.tesla.com/solarpanels

I created a absolute sticky top menu with a
$el.x-bar {
width: 200px !important;
}
in element css and with a 100vh height.
Added the #anchorpoints in buttons menu and page rows

it’s not working good (anchors points are not synchronized with the buttons), what im i doing wrong ?

[marc_a]

Hey @Lyser,

Thanks for reaching out!

The given credentials are not working, please double-check and update them with the correct ones.

Thank you.

[Lyser]

Ok, credentials updated

[tristup]

Hi @Lyser,

I have checked the page and seen the problem you are referring to while clicking on the Button. But while changing the anchor directly in the Browser address bar, it worked perfectly fine. If you go through the following screenshot, you can see the Four is in the URL and it shows the Four section but the Five button is activated.

There might be something else which is the reason behind it, I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Lyser]

Ok i tried desactivate all plugins, check updates, and no changes.
Then i tried to put the vertical menu on top then it seems working way better (still no perfect), perhaps the problem is how i built this menu (with 100vh height for the container).
Then i checked with a top horizontal menu, and the anchor links seems to work good.

But i cannot finf why when it’s #four in the url, it’s not the four button who is activated.

[christian]

Hey @Lyser,

Your header setup looks incorrect and that might be the cause of the issue since you’re using a sticky bar on the side. Instead of using the Top Header, please use the Left Header. You don’t need sticky bars in that setup as the side headers are fixed.

Please change your setup first then we’ll continue investigating if the issue persists.

Thanks.

[Lyser]

Yep the anchors are working good with the left header but the website background can’t be fullscreen anymore (or it can ?).
I noticed that when i remove the sticky on the top header the links to the anchors are working good.

Is it possible to have a vertically centered and left aligned sticky menu with full size background like the tesla website ?

[ruenel]

Hello @Lyser,

Is it possible to have a vertically centered and left aligned sticky menu with full size background like the tesla website ?

• Yes, you can. Just remove your Fixed Left Bar in your custom header. What you can do is to edit your page and do the following:
  1.) Insert an empty Section. You must disable the Section padding.
  
  

2.) Instead of inserting a Row element, click “CMD” or “Win” key in your keyboard and click the “+” icon to add a DIV element. And then you insert the button and gap elements inside the DIV element like this:

3.) You must set the z-index to at least 9999 so that this DIV element will be on the top in front of all other elements on the page.

4.) Set the width and height of the DIV element to desire width like 160px and 100vh:

5.) Position the DIV element as “Fixed” and this should do it.

Kindly let us know how it goes.

[Lyser]

Oh i see, no header used here, that’s great, it working perfectly, thx you very much for this @ruenel !

One last thing, when i clic on a button it’s not highlited correctly (clicking on the “two” button makes the “one” get highlighted. It just needs one or two pixels scrolls to get higlighted correctly. (Only the “four” button is working correctly). I don’t understand why a button is working and not the others because the rows have been duplicated so their constructions are the same.)

How to get buttons gets higlighted correctly ? Perhaps it is a bug ?

[tristup]

Hi @Lyser,

It is due to the Scrolling Offest, I have added the following code into the Page JS of that specific page and now the Buttons are highlighted correctly.

window.csGlobal.csHooks.filter('hash_scrolling_offset', (offset) => {
    return offset + 10;
} );

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Lyser]

Thx you @tristup, that’s working good now.

To understand well, why there is a scrolling offset that cause this problem ? is it something due to the way the page has been made ? Is there a way to avoid it ?

[tristup]

Hi @Lyser,

The Section with the specific ID should be in the Top of the page in your case it goes under the screen and that is why the link with the previous Row is activated. While adding the 10 with the existing offset, it forces the Row to a little below and makes it Top of the page and that is why the exact Button is activated now.

Thanks

[Lyser]

Ok, thx you for all explanations, very good support !

[ruenel]

You are most welcome, @Lyser.