Fixed header and header height

[MortenHofft]

I notice you have restyled the header. It looks great. The fixed header does introduce some bugs though.

You cannot see the Table Of Contents (CONTENIDOS) on e.g. https://hp-colombian-biodiversity.gbif-staging.org/compartir/tiposdedatos

Anchors to specific paragraphs jumps too long (as it it now hidden behind the header) https://hp-colombian-biodiversity.gbif-staging.org/compartir/tiposdedatos#listas-de-especies

You can no longer see the bottom of the table on https://hp-colombian-biodiversity.gbif-staging.org/data, so the size of the widget should probably be changed

[camiplata]

Thanks, we will fix this bug the comming week.

[MortenHofft]

If you have difficulties targeting the correct elements with your css, then let me know if I need to add additional classes or IDs in the theme. Also notice that you can add custom Javascript if you need to (e.g. only showing the sticky header upon scrolling up the page)

[aduarte-sib]

Hi, Morten! I haven't been able to fix the bugs caused by the fixed header. I've tried by overriding the value where the Table Of Contents sticks and the anchors jump to, but as I say, unsuccessfully.

We would like to maintain the fix header and maybe you could give us a hint on whats the class where the value is or implementing javascript to get the sticky header only upon scrolling up the page, as you say.

Thanks!

[MortenHofft]

I would below did it for the Table Of Contents

.toc-wrapper .toc {
  top: 96px; /* The height of your header - I do not know how it is set currently. But if you use a variable, then using that. And if you have different heights on mobile and desktop, then that needs a different rule of course.*/
}

[MortenHofft]

The anchor offset are more tricky. You probable need a javascript library to handle that. Or implement a function yourself. On GBIF.org I use a css pseudo element, but it was quite awkward to implement I remember.

[MortenHofft]

For anchor offset you might be able to get away with something as simple as a positive top padding and a negative top margin on the headlines. Something like

.content h3 { /*you need to target all relevant headline sizes of course*/
  padding-top: 100px;
  margin-top: -50px;
}

Be aware that I haven't tested these ideas, and cannot guarantee that there isn't undesired side effects. I would recommend being very specific in your selectors to avoid spilling into something you do not wish to (such as the data widgets)

[MortenHofft]

As for the data widgets you need to adjust the size of the table etc. Something like this should do it

.gbif-occurrenceSearchLayout {
    height: calc(100vh - 96px)!important;/*I'm afraid you need !important because the height is inline styling and hence have a higher specificity*/
}

Again, you should test this and be prepared to adapt as the project evolves. Hope it helps

[MortenHofft]

I notice that you need to do something about the left menu on https://hp-colombian-biodiversity.gbif-staging.org/terminosCondiciones/PoliticaUso as well

[MortenHofft]

I forgot about scroll-margin-top i guess that does exactly what you need for the anchors?

[camiplata]

The fixed header was removed for now, @aduarte-sib will check if we will try again if we give a second trial.