Scroll-margin-top

[oriol]

Hello,

I’m trying to use anchor links to navigate through a page, but whenever the link is clicked part of the section (in this case the images) ends up covered by the sticky header. See example here:

Additional Modules - Savant WMS

Additional Modules - Savant WMS

Additional Modules - Savant WMS

Additional Modules - Savant WMS

I’ve tried using the CSS property “scroll-margin-top” but it isn’t recognized, I think it’s because smooth scrolling is handled through javascript. How can I achieve a similar effect to “scroll-margin-top” (being able to define the margin top when scrolling through an anchor link)?

Thanks,
Oriol

[marc_a]

Hi Oriol,

Thanks for reaching out!

I suspect that this issue is already solved with the latest version of Pro and I found out that you had an old Pro version 4.2.3. I suggest that you update your Pro theme to the latest version which is 4.3.3.

Hope that helps and let us know how it goes.

Thank you.

[oriol]

Hello, I’ve updated the theme, and it’s still behaving as before, is there any other way to fix this?

[oriol]

Also, the issue not only happens with the menu bar, in this page it happens with the accordion sections as well, with the top “Features / Pricing” section covering the top part of the accordions.

Features - Savant WMS

Thanks

[tristup]

Hi Oriol,

For the Additional Modules page, you need to add some padding into the sections which are linked. For the Features page, the Pricing Header is itself sticky and does not have any top padding or margin. You need to add a few custom CSS codes to add the padding on it. Please remember that as it is a Sticky component, the rest of the content can be seen behind it if you add any padding or margin.

To add padding you can add the following code into the Element CSS of that specific section for the pricing header.

$el .go-pricing
{
    padding-top:20px !important;
}

Hope it helps.
Thanks

[oriol]

The problem is I don’t want to add any padding to the sections, the client wants them as they are, I only want it to show properly when it scrolls automatically. If I added padding/margin to those sections I would be left with some blank space above it when scrolling manually.
the CSS property "scroll-margin-top " usually handles this, but I think smooth scrolling is controlled through JavaScript in the PRO theme, so it doesn’t work.

[nabeel]

Hey Oriol,

To better assist you with the issue, please get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[friech]

Hi Oriol,

Please set your One Page Navigation menu on the page so it will have a proper calculation, offsetting the sticky header.

On a side note, it seems you have an issue with your Image CDN? The images on your page are not loading on our end.

Cheers!

[oriol]

Thanks, I tried it, but it is still behaving in the same way, both when clicking on one of the menu items from a different page, as well as from the same page. I assume for it to work properly I’d have to create a dedicated menu for that page, but we don’t want to overwhelm visitors with too much information, and changing menus.

What does the “One Page Navigation” change with regards to functionality (I assume it modifies how the JS handles the height of the menu when scrolling)? Is there a way to change that functionality manually, maybe with “Page JS” or “Global JS”?

[oriol]

Also, One Page Navigation doesn’t fix the issue in this page:

Features - Savant WMS

Is it possible to turn off the JS scrolling behavior in certain pages, so that the CSS property “scroll-margin-top" can be used?

[ruenel]

Hello Oriol,

I am another staff checking in and I have taken a closer look at your issue. There are things that I have noticed on your site which I think are the reasons why you are having this issue.

Issue 1:

Your actual header height is 76 pixels and yet in your theme options settings, Pro > Theme Options > Headers > Top height, you only have set it to 70 pixels. Please have it increased because the JS scroll events will compute the top height.

Issue 2:

You have added the element IDs in your row elements which is not the basis of the One Page Navigation. To properly use the one-page navigation, the IDs should be added to the section element. Therefore, your page elements need to be structured into sections like this:

Issue 3:

To properly implement the One-Page Navigation, you will need to create two set of menus. One menu will be used as your primary menu and the other menu will be used exclusively as your One Page Navigation menu. In your primary menu, your custom link will have the absolute URLs while the One Page Navigation exclusive menu will only have the relative URLs.

Primary Menu absolute URL http://example.com/#anchor-name:

One Page Navigation menu with relative URL http://example.com/#anchor-name:

Hope this helps.