Fixed Header and anchor links

This topic has 5 replies, 3 voices, and was last updated 2 years, 10 months ago by Artem Temos.

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

Author

Posts
January 19, 2022 at 9:35 am #346324
Thora
Participant
Hello,

I recognized two points for anchor links:

1. Fixed Header not automatically shown for full anchor links

When the in-page-link is called external (full URL incuding the anchor, e.g. “myurl.com/#anchor”), the “always visible fixed header” (= not only when scrolling up) is not shown directly, but only after the user scrolls a bit.

An example you can see here by clicking the link*:
https://woodmart.xtemos.com/demo-fashion-colored/demo/fashion-colored/#wd-61cc20af94e25

With the current plugin used on our old site it is working, but we need to use as few plugins as possible for speed reasons.

You can see an working example at the demo of the “myStickymenu” plugin here:
https://demo.premio.io/mystickymenu/#colophon

* Edit: Ok, oddly now it seems to work in Firefox, but still not in Chrome and Safari).

2. Scrolling Offset doesn’t work for sections

When an anchor link is clicked (external or on the same page), the element with this ID normally is overlapped by the fixed header. I tried different settings:
```
html {
  scroll-padding-top: 220px; /* height of sticky header */
}
```
```
:target {
  scroll-margin-top: 220px; /* height of sticky header */
}
```
```
:target::before {
  content: "";
  display: block;
  height: 220px; /* fixed header height*/
  margin: -220px 0 0; /* negative fixed header height */
}
```
But all solutions don’t work for IDs given to sections (we are using Elementor). As a workaround I can set the ID for the first element within the section. But the ID describes the full section and not only the first element.

Thank you in advance.
- This topic was modified 2 years, 10 months ago by Thora.
January 19, 2022 at 12:28 pm #346382

Aizaz Imtiaz Awan
Keymaster

Hello,

1. Yes, the sticky header is initiated only when the user scrolls the page. We designed it like that to optimize the theme performance. We try to run as least JS code on initial loading as possible.

2. There is no fix for this and it is the way all browsers work. The only workaround here is to add the ID for some sections 100-200px above the target one.

Best Regards

January 20, 2022 at 8:33 am #346629

Thora
Participant

Hello.

2. There is no fix for this and it is the way all browsers work. The only workaround here is to add the ID for some sections 100-200px above the target one.

Normally one of the three CSS codes mentioned above are exactly to avoid overlapping due to fixed header.

I recognized, that it does work for regular WordPress pages fully generated with Elementor already (with none of the three codes above within my custom CSS!).

But on WooCommerce category pages, where we have Elementor blocks before and after the listed WooCommerce categories/products, the menu anchor is overlapped by the fixed header. I cannot figure out this difference in behavior.

I deactivated all plugins except Elementor, WooCommerce and the theme plugin and cleared the custom CSS for testing purposes, but there was no change in this behaviour.

January 21, 2022 at 7:27 am #346901

Artem Temos
Keymaster

Hello,

It works on your example because you placed your anchors 180 above your real titles https://monosnap.com/file/NvXx9kfZv4CplMF3j5VyuPfzBL54M4

And your category description anchor is right above the title https://monosnap.com/file/hqjCPFICuCWvCJg4JfOCf7K2l2t3b4

Kind Regards

January 21, 2022 at 3:05 pm #347012

Thora
Participant

Oh, I’m embarrassed now that I had overlooked the custom CSS that is only deposited for the page with the working anchor.

But I don’t understand why you say that you optimized the JavaScripot for performance, but then you seem to use JavaScript for a smooth scroll effect. I know that the CSS command “scroll-behavior: smooth;” only supports modern browsers, but it’s only a nun-functional, optical feature – and the JavaScript seems to override or ignore every usual global offset setting for fixed header – without any working solution.

Activating the option, that the sticky header isn’t shown when scrolling down, isn’t a good solution, because e.g. when scrolling up from the footer bar on a single product page via clicking the “select options” button, the product drop downs are overlapped by the header.

To simply say that there is no solution to this is, in my opinion, an indictment. If a sticky header is offered, then anchor links must also work correctly, especially because they are also used by default, as by your product page footer.

January 24, 2022 at 7:03 am #347361

Artem Temos
Keymaster

Hello,

Yes, we use JS for our sticky header functionality. It is not possible to do the same functionality with CSS only. JS is required there anyway.

Kind Regards
Author

Posts

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

Fixed Header and anchor links

Create your WordPress website.