Mobile Sticky Menu fix

Hello,

I’m working on a one-page website and implemented a sticky header for the mobile version using custom CSS:

@media only screen and (max-width: 767px) {
.responsive #top #main {
/* Margin top value should be equal to header height */
margin-top: 150px;
}
.responsive #top #wrap_all #header {
position: fixed;
}
}

The sticky menu works as expected. However, I’m running into an issue with anchor links on mobile. When navigating via the menu, the page scrolls to the correct section, but the fixed header overlaps and cuts off the top portion (such as the section heading).

This does not happen on desktop—only on mobile with the sticky header enabled.

Is there a recommended way to offset anchor scroll positions or adjust this behavior so that the full section (including headings) is visible when navigating via anchor links?

Thank you!