WAIT: Header megamenu containers move with sticky scroll

Bugs
1

Browser: Brave
OS: macOS
URL: https://acume.org

Hello when I turn on the sticky header, all my megamenu containers shift to the left. When I turn off sticky, they don’t move on the X axis. I have set the width of the mega menu to be the full section width, but tried setting as smaller container width and experienced same issue. I tried removing my own CSS and had same issue.

Thanks!

2

Hi @yasmine,

it’s hard to say from just a website, but it seems that you set your font to be smaller on scroll. Can you check this setting in the header template?

Let me know, please.
Matej

3

Hello, yes I have set font to be smaller on scroll. But the width is tied to section width and so even with shrinking divs, the mega menu containers shouldn’t shrink.

But you are right - this caused it .sticky.scrolling %root% a, .sticky.scrolling %root%, .sticky.scrolling %root% i{
font-size: var(–text-sm)!important;
}

I still dont understand why was shifting to the left.

But no worries! Thank you

image

4

Ok, I’ll mark the topic as no-bug, as it’s solved :slight_smile:

Because with a smaller font size, text takes less space, and it all “shifts” to the left. :slight_smile:

Best regards,
Matej

5

Hello - just to clarify I did not mean the text (on the top level the font that was also shifting to the left because the text got smaller, and I expect that)

I meant the megamenu open container that should have been 100% of the width (assigned to the section, which was max-width: 100%)
That container was shifting to the left and right as it went beyond 100% and so the content went off the page.

6

Oh, wait, then it was a misunderstanding, but still somehow solved :slight_smile:

Saying that, I did not notice any issue with the container shifting to the right and going beyond 100%.

If you will ever have the same issue, please record a video, and let us know.

Thanks.
Matej