[Resolved] jQuery-free sticky menu and menu animations

[Alessio]

Hi there,

I’m trying to eliminate all jquery from the frontend of my website. When will it be possible to use the sticky menu from GeneratePress without jquery?

Also, my mobile menu animation looks really choppy and doesn’t feel as smooth as on other websites. Also, it doesn’t animate when closing the menu and the animation only works for sub-menus. Do you know how I can improve that?

Do you have plans to add more modern menus to GeneratePress, especially in terms of menu animations?

Thank you!!

Alessio

[Leo]

Hi there,

When will it be possible to use the sticky menu from GeneratePress without jquery?

This is in our plan but I can’t offer a timeline yet unfortunately – the sticky navigation/transition effect is actually the issue right now.

If you don’t want any transition effect with the sticky navigation then we can help with the CSS right now.

Do you have plans to add more modern menus to GeneratePress, especially in terms of menu animations?

Are you referring to the submenu? If so there is currently no plan I do like the idea and will bring it up to our team for discussion 🙂

[Alessio]

Thank you!!

I can definitely live without the transition effect. How could I implement the sticky menu?

Is it possible to just show it when scrolling up and hide it when scrolling down, or will I have to wait for the jQuery replacement for that?

Also, I was referring to both submenu and main menu. I made my website look really modern and pretty using GeneratePress while having great performance, but the menu has always bothered me.
It feels really old – especially on mobile devices. I’ve recently removed Max Mega Menu because of performance issues and spent the whole day trying to style the GeneratePress menu to make it look more modern.

However, I couldn’t get it on par with the menu of any other website. It just doesn’t feel modern/smooth especially on mobile :/

I’d be really happy about some more modern menu customization options, because it’s the hardest to customize/”modernize”.

[Leo]

Can you disable your caching plugin first?

[Alessio]

I did, but that cache plugin only controls the nginx fastcgi cache (I don’t have any other cache plugin)

[Leo]

Try this:

body {
    height: 100vh;
}
.main-navigation {
    position: sticky;
    top: 0;
}

[Alessio]

Hmm it works, but adding

body {
    height: 100vh;
}

breaks the layout (it adds two scrollbars to my website).

[Jessica]

following.

[Ying]

Hi Alessio,

position: sticky; doesn’t work when its parent element set to overflow: hidden;.

There are 2 options left to make it work:

1. set a specific height to the parent element like what Leo suggested, but it will stop the background image from scrolling with content.

2. Remove or override the overflow-x: hidden !important; for bodywith this CSS:

body {
    overflow-x: visible !important;
}

The reason that you have horizontal scroll and need to use overflow-x: hidden;is the align full blocks, they are actually wider than the screen. So add this CSS to make them a little bit narrower:

.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 99% / 2) !important;
    margin-right: calc(-100vw / 2 + 99% / 2) !important;
}

Let me know how it works 🙂

[Alessio]

Hi Ying,

Thank you for the advice regarding the overflow-x: hidden! The entire reason I used it was to cover up those blocks wider than the screen. Now it works! 😊

It’s not the most elegant solution, though. I had to use this media query:

@media (max-width: 1149px) {
	.no-sidebar .entry-content .alignfull {
		margin-left: calc(-100vw / 2 + 97% / 2)!important;
		margin-right: calc(-100vw / 2 + 97% / 2)!important;
	}
}
@media (min-width: 1150px) {
	.no-sidebar .entry-content .alignfull {
	    margin-left: calc(-100vw / 2 + 99% / 2) !important;
	    margin-right: calc(-100vw / 2 + 99% / 2) !important;
	}
}

to make it work for smaller screen sizes, but it still doesn’t work for 581px width (that would need 96% and even smaller screen sizes would need 95%, 94%…) or smaller. I’ll have to use many different media queries for smaller screen sizes.

Do you maybe know a more elegant solution for this?

[Ying]

Actually, I think I got a better solution now 🙂

Since the alignfull containers are in the site content, we could add the overflow-x:hidden; to the site container instead of adding it to the body tag.

So try the following steps:

1. Remove the CSS which restricts the width of alignfull containers from your last reply.

2. Remove this CSS as well:

body {
    overflow-x: visible !important;
}

and

body {
    overflow-x: hidden !important;
}

3. Then add this CSS:

.site.grid-container {
    overflow-x: hidden;
}

Let me know 🙂

[Alessio]

Hey Ying,

This works perfectly and I have no issues with this solution. Thank you!!!

Is it possible to hide that menu when scrolling down and show it when scrolling up as well?

[Ying]

Unfortunately, that’s not possible with CSS, it will require custom JS solutions which is out of the scope of the forum.

[Alessio]

Okay!

I’ll be on the lookout for the jQuery-free menu which was announced in the last beta blog post

[Alessio]

Hey Ying,

I’ve encountered an issue with this CSS on the page I put in “private information”. Basically, that comparison table is now cut off because of the overflow-x.

Any way I can work around that for this table?

[Author]

Posts