Id link scrolls but menu is in the way

[alex5252]

http://138.128.175.130/~concretecoatings/basement-floor-coatings/#process_form

Page scrolls too far and covers top of #process_from
Same behavior if you click a link that has the href set to #process_form

#x-site > header is {position: fixed; top: 0px} so it covers #process_form
I had written some js to resolve this however it seems as though pro 4 added an anonymous function to the click event, in cs.2155f74.js, to handle this however it doesn’t take account for the menu.

I understand that trying to compensate for every conceivable situation is impossible but you really should set that function to a variable before binding so it can be removed if necessary.

If you are aware of a workaround that’d be appreciated. I tried myself but the relevant file is minified and making heads or tails of it is next to impossible.

[ruenel]

Hello @alex5252,

Thanks for writing in! Kindly remove all your custom CSS that changes the site header. If you want to have fixed top navigation, you should enable the “Sticky Bar” option in the bar settings of your custom header.

Removed this CSS blocks:

#x-site > header > .x-bar {
    position: relative !important;
    width: 100%;
    z-index: 9999;
    top: 0px;
}

#x-site > header {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    height: auto;
    z-index: 999;
}

Sticker Bar option in the bar settings:

Hope this helps.

[alex5252]

This “solution” is unambiguously unacceptable. I for a very long time wrote my sticky header bars just like this and they were a nightmare to update. I’ve since moved on to much better solutions. Sure I could write a whole bunch of css variables or some js to keep track of all the heights so every bar is in the right spot…or you can get it for free by position: fixed the whole header. I abandoned this approach years ago because it was unnecessarily complicated.

There simply must be a smarter way then just doing this the dumbest way possible and writing mountains of css to cover up the dumb.

[ruenel]

Hello @alex5252,

I have taken a closer look at your page element structure. Please be advised that the bar only respects the position of the sections. You are using the #process_form link anchor which is coming from the ID of the column. Using it as an anchor will just position the column to the top of the page because the bar does not acknowledge the column. This is also why the column is behind the bar.

If you use the #tsr_process as your link anchor on the other hand, this should position the section properly since the bar will recognize the anchor for the section. We would highly recommend that you create a separate section. Place your process form and use process_form as the ID of the section (not on the column). This should place the process form in the right spot just below the navigation bar.

Hope this makes sense.

[alex5252]

It’s…better…in the same way that losing your foot is better than losing your leg.

The desired scroll would place the menu roughly at the yellow line.

It’s bothersome that the best that can be provided me is a hack, an ineffectual hack.

I’m just going to throw an extra invisible div in my column and absolutely place it above by the height of menu and link to that instead. It’s a insanely ridiculous hack, but at least it will prove efficacious.

[alex5252]

Even so I would like to explicitly request that future versions of pro do not bind this fixed menu offset scrolling js using an anonymous function , or at least provide us a hook with which to filter the result.

[ruenel]

Hey @alex5252,

Your feedback has been noted. We will forward it to our developers.

Best Regards.

[alex5252]

Much appreciated.

[ruenel]

You are most welcome. If there is anything else we can help you with, please do not hesitate to open another thread.