Header menu covering the anchors
Hello!
When wanting to use anchors on your page and still keep the header menu when scrolling down. You usually step into the issue where the header menu covers the text or the anchor you are using on the page.
Have read almost all of the help topics about this on the form and there are mostly fast solutions which involves adding a margin to the specific anchor or adding a hidden object. Those are not smart solutions, and no viable if you want to have more than 3 links, it is also a hassle to keep in maintenence.
A smart solution would be
html {
scroll-padding-top: 4rem;
}As described in https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
However it does not work with Brizy WP or Brizy Cloud when we are trying it.
Why is that and is there a smart, long-term, and sustainable solution to this?
-
Hi,
Thank you for reaching out to us.
Unfortunately, we do not currently have a permanent solution for this issue. However, we have recently received a similar request and will forward it to our developers as a feature improvement for upcoming updates. In the meantime, we recommend implementing a temporary solution by adding a margin or a spacer element, as suggested, until a more suitable resolution is found.
Sorry for the inconvenience.
Best regards,
Ariel H.0 -
Any solution by now?
0 -
Hello Stefan,
Have a look at https://jmp.sh/share/AxNJabIMPqcoPcr7AWu6, where we explain a workaround for resolving issues that can occur when using anchor links together with a sticky header.
The workaround provides a practical way to ensure that visitors are taken to the correct position on the page when they click an anchor link, rather than having the target content hidden behind the sticky header. Kindly follow the steps outlined in the guide to implement the workaround on your website.
0 -
Thank you very much George, I've seen the video.
This is a quick and dirty solution for simple websites with little maintenance.But for a website with many pages with many blocks in three different languages, this is really messy and lots of work for a simple bug that could be fixed in your JavaScript...
Any hope you'll be fixing this bug in the near future?0 -
Hello Stefan,
We also created the following JS code. You could also try this as an alternate solution.
Open any Brizy page in the editor, drag and drop the "Embed" element into the global footer, and paste the following script.
<script>
document.addEventListener(
"click",
function (event) {
// Do not interfere with modified clicks.
if (
event.button !== 0 ||
event.ctrlKey ||
event.metaKey ||
event.shiftKey ||
event.altKey
) {
return;
}
const link = event.target.closest('a[href*="#"]');
if (!link) return;
const url = new URL(link.href, window.location.href);
// Only process anchor links pointing to the current page.
if (
url.origin !== window.location.origin ||
url.pathname !== window.location.pathname ||
url.search !== window.location.search ||
!url.hash ||
url.hash === "#"
) {
return;
}
const id = decodeURIComponent(url.hash.substring(1));
const target = document.getElementById(id);
if (!target) return;
event.preventDefault();
event.stopImmediatePropagation();
const header = document.getElementById("header");
const offset = header
? header.getBoundingClientRect().height
: 50; // adjust as needed until you’re satisfied with the spacing between the header and the content blocks.
const destination =
target.getBoundingClientRect().top +
window.scrollY -
offset;
window.scrollTo({
top: destination,
behavior: "smooth"
});
history.pushState(null, "", url.hash);
},
true
);
</script>
After adding the code, save your work and clear any website and browser cache and check if this helps resolve the issue with the anchor block visibility.0
Please sign in to leave a comment.
Comments
5 comments