Pro sticky menu jumps not exactly to section

[salilou]

Hi,
on a customers website built with Pro theme I have this issue:
The sticky menu jumps not exactly to sections.
The headline is overlayed.
I fixed it by adding a plus 35px top margin to each section, but this is quick and dirty and changes the layout.
Link in secure note.
Hope you can help
Thank you
Hannes

[tristup]

Hi @salilou,

Thanks for reaching out.
It might be related to an ongoing problem with the Sticky Bar and the offset calculation while the position is set to Relative. You can either set it to the Absolute and check or you can add the following code into the Theme Options > JS to manually set the offset value.

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

Hope it helps.
Thanks

[salilou]

Thank you for the fast reply.
Setting it to Absolute has the effect, that clicking on the first menu item “Hey” jumps too far, so that a part of the top slider becomes visible.
The menu bar is with dynamic height.
Hope you can help.

And a further question:
The logo in the menu bar jumps from bigger too smaller size.
How can it be set to increase/decrease its size optically nice and smoothly?

Thank you!

[tristup]

Hi @salilou,

In that case, you need to set the position to relative and use the code suggested in the previous comment and adjust the offset value if required. The logo resizing depends on the Shrink Amount set to the Bar > Sticky as shown in the given screenshot. You may need to adjust the value to make it smooth.

Hope it helps.
Thanks

[salilou]

Thank you.

The first point is solved by the relative setting plus code.

The second point still is open.
How can I set the speed of the logo resizing?

[ruenel]

Hello @salilou,

For the animation speed of your resizing logo, please click on the Logo Image element and check the Effects module. You can adjust the Transition Duration:

Kindly let us know how it goes.

[salilou]

Thank you.
The Effects > Transition Duration is already 300ms
Nevertheless the Logo resizing is without smooth scaling.
It just jumps from small to bigger size and vice versa.
Please look at the site, link in secure note.
Thanks,
Hannes

[christian]

Hey Hannes,

By default, the Image Scaling is smooth so there must be something missing and/or affecting the Image element. Below are the possiblities:

1. I don’t see the Image Scaling properties in your image. Make sure Scaling is enabled.
   
2. If Scaling is already enabled, you header might be corrupted. Try going to Cornerstone > Settings and click the Clear Style Cache button.
3. Also try recreating your header.
4. Also, remove all your custom CSS and temporarily deactivate 3rd party plugins to ensure nothing is affecting the Image element.

By the way, I’ve tested changing the Image Scaling Transition Duration and it does not alter the speed of the scaling. That is whether setting the Transition to 0ms or 2000ms. But, it’s still smooth out of the box on my end. Not sure if this one is a bug so I’ll post this case in our issue tracker to be queued for further investigation by our development team.

If none of that helps, please provide the following info in a Secure Note.

• WordPress Login URL
• Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[salilou]

I did every point you suggested.
Nothing worked.
Here are the credentials in a secure note.

[christian]

Hey @salilou,

One of the points I’ve listed is “removing custom CSS”. You have not removed the Element CSS of your logo. Kindly follow the suggestions next time. I commented out the custom CSS and your logo now scales smoothly.

Thanks.

[salilou]

Thank you! I forgot to check the element CSS.

[marc_a]

Hey @salilou,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.