Div sticky menu align center

[Rigveda_Timorason1]

Hello community,

My menu has a certain width and I want to center it on the whole page.

But my sticky menu doesn’t do that. It jumps right to the left side. Do you guys have an idea how I can keep the sticky menu centered.

[Andre]

Hey @Rigveda_Timorason1 - do you have a preview link for us?

[Rigveda_Timorason1]

this is the preview link:

Blizzin - Berlin

[Andre]

Hey @Rigveda_Timorason1

So, you have a

max-width: 80%

set up. When the menu is set to sticky, it has:

position:fixed
left:0

Usually, you would not see this, when the menu is 100% wide. Therefore, with 80% you see the left position.

Solution: Change the sticky class to left:50% and add transform: translateX(-50%)

&.sticky {
    left: 50%;
    transform: translateX(-50%);
}

Already change it for you. Let me know what you think!

[Rigveda_Timorason1]

hi andre,

It works! Thank you so much. I had been messing with the code for a while. I just hadn’t done this one “transform: translateX(-50%);”

Thanks again so much!

[Andre]

You are very welcome!

[Rigveda_Timorason1]

Hi Andre,

I now have the following problem with the menu. When I scroll down, you don’t see the menu anymore. I removed the css code you added to test if that’s what the problem is. And that was the problem.

Do you maybe know what I can add to the CSS?

here is a video screen capture what you then see on mobile.

https://smartholding1-my.sharepoint.com/:v:/g/personal/rig_nomadsoffice_nl/EY9SXkhCFkRHiGp7gM1qQKYBZq4UHl6HdcYV3ZvRotI2JQ?e=wbKypz

[Andre]

I had it fixed for you, @Rigveda_Timorason1

Fixed: → &.sticky { left: auto; }

The problem was the transform, it was fine until you open the menu. We missed this. Should be great now?

[Rigveda_Timorason1]

@Andre

left: auto; }

Hi Andre,

Thanks for the quick reply.

But i still see this
&.sticky {
left: 50%;
transform: translateX(-50%);
}

[Andre]

Changed it for you.