[Resolved] Sticky menu on amp

[Ryan]

I was looking at the way they make a fixed position menu on the amp developer website https://amp.dev/. The use position:sticky to stick the menu at the top after scrolling past the top banner. I can’t quite figure out how they did this, would you have a suggestion of how this could be implemented with Generatepress on amp? I’m using your amp compatibility plugin as well.

[Ryan]

Actually I figured it out it was super simple. If it helps anyone you can also make the menu sticky with the following code.

.site-header {
	position: -webkit-sticky;  
	position: sticky;
	top: 0px;
}

This won’t look correct if you have the admin bar enabled, if you have logged in users you will have to tweak it for that. Something like this will work.

.logged-in .site-header {
	top: 32px;
}

[David]

Glad to hear that – and thanks for sharing the solution

[Author]

Posts