The Offset Problem

Hello,

It seems that you use another plugin (“jquery-smooth-scroll”) that prevents “Page scroll to id” from scrolling the page and apply the offset. You also have an error in your offset value.

Both should be easy to fix. Try this:

Go to “Page scroll to id” settings and change the “Offset” value to:

.navigation-top:width(>767)

Scroll down to “Advanced options” and enable/check “Prevent other scripts from handling plugin’s links” option.

Save changes and test your page ??

Let me know if it works

Hey

First of all a thank you for your quick help .. it worked!

but one more small technical problem:
if on a desktop view the menu bar is not at the top
the animation jumps to a bit deeper .. if you press it again the button will jump to the right position.. Is it easy to fix or is it problem from the theme?

Greetings from Germany

I found the problem:
it was the black menu bar:))
Now it works perfect!!
Thanks a lot for your support!

Nice work

Thanks. Glad I helped ??

I’m marking this as resolved. If you need more help let me know.

I am also using the offset value “.navigation-top:width(>767)”. Is it possible to use the height of this plus e.g. 5 pixels? Let’s say navigation-top menu is 15 pixels and I would like to add 5 pixels more. Do you have any solutions for this?

• This reply was modified 6 years, 3 months ago by sasalala.

@sasalala There’s no way to do this with the “Offset” option but you could do something similar via CSS.

Leave the “Offset” value as you currently have and give your target sections a top padding and a negative top margin of 5 pixels (when the viewport is greater than 767px):

@media only screen and (min-width: 768px){
  .your-section{
    padding-top: 5px;
    margin-top: -5px;
  }
}

Hope this helps

• This reply was modified 6 years, 3 months ago by malihu.

Thanks for the answer. I added the code to custom CSS section in the theme-editor. Unfortunately it does not work. When I click e.g. on this link: https://paarberatung-duesseldorf.de/#mein-ansatz there is still no space between menu and the scroll to id target. For design reasons I would like to add some more free space. Any other idea?

@sasalala Try the following in your CSS:

#mein-ansatz{
    padding-top: 6em;
    margin-top: -6em;
    display: block;
    position: relative;
    box-shadow: none;
}

You can increase/decrease the 6em (i.e. 96px) to adjust the extra offset you want. I’ve set it to 6em to match your section’s top padding.

You can do this for all your sections at once:

#startseite, #mein-ansatz, #konditionen, #über-mich, #kontakt, #kontaktformular{
    padding-top: 6em;
    margin-top: -6em;
    display: block;
    position: relative;
    box-shadow: none;
}