Navigate to URL with # and sticky menu

I Need Help
1

Hi all,

if I use “Navigate to URL” to e.g., “./index.html#features”, and the menu is sticky, it scrolls such that the target element is behind the menu. Guess it’s a bug? Any workarounds?

Note: “Scroll to target” works fine.

Thanks,

Markus

2

Scroll to target most probably incorporate the hight of the sticky menu.

No. The browser just navigates to this id and ofc doesn’t know that the menu is sticky.

1 Like
3

No. The browser just navigates to this id and ofc doesn’t know that the menu is sticky.

yes true.

So I guess I need a “Scroll to target” where I can also specify the target page.

4

I was able to fix it by adding the following code into the header section via page setting:

  <style>
    /* Replace 130px with your actual sticky header height */
    html {
      scroll-padding-top: 130px;
    }
  </style>

Thanks for pointing me in the right direction :slight_smile:

2 Likes
5

Addition: If you have different menu heights for different breakpoints:

<style>
/* XS (0px → 576px) */
@media (min-width: 0px) {
html {
    scroll-padding-top: 75px;
  } 
}

/* SM (576px → 767px) */
@media (min-width: 576px) {
html {
    scroll-padding-top: 100px;
  }
}

/* MD (768px → 991px) */
@media (min-width: 768px) {
html {
    scroll-padding-top: 100px;
  }
}

/* LG (992px and higher) */
@media (min-width: 992px) {
html {
    scroll-padding-top: 105px;
  }
}
</style>
1 Like
6

Another note: Actually it’s best to put this code in Window → Code Editor → Additional CSS (without the style tags). This way it does not have to be set for every page.

1 Like