peakshift/makers.bolt.fun

stop using javascript to calculate navHeight, make it a static height instead

Opened this issue · 5 comments

There's been a bug where the javascript calculation for the "--navHeight" css variable. This may not be necessary if we just set it as a static value of 72px and let css breakpoints do the rest.

Could you tell me a little bit more about the problem that has been happening with you??

Cause there was really a problem with the nav height being not properly applied, but a few months back, I thought I fixed the problem by migrating some of the usage to CSS variables, & the problem wasn't happening with me anymore.

Has it been happening for you recently??
If so, could you tell me about the scenario for the bug.


What is the approach that you are suggesting that we use with CSS-only??

We are not calculating the nav height using JS btw, the nav will take whatever height it needs, & then using JS we are getting this height & storing it in the global state, & a few components are using this height to set some values in their styles.

(mainly all the sticky items that needs to know how much away from the top they should be to NOT overlap with the navbar)

So if we follow a CSS-only approach, how will these items position themselves properly without knowing the nav height value??

Yeah so this is why I'm suggesting we just have a fix height for the various sizes of the nav bar. The navigation bar should not need to be resizable. So then we won't have to use JavaScript at all to calculate anything.

The problem happens in safari primarily. It makes the scrolling of the side columns difficult, because a lot of it gets cut off among other things.

The problem happens in safari primarily.

Which Safari btw?
Mobile or Desktop?

Okay...
I borrowed a Mac from my friend & tried the website, but I wasn't able to re-produce the issue...

I think it would be quicker if you would just record a video where you show me the scenario that is happening with you.

Btw, just make sure that your safari browser version is relatively updated.