jQuery-free sticky menu and menu animations

This topic has 19 replies, 6 voices, and was last updated 5 years ago by David.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

Posts
March 30, 2021 at 6:17 am #1715181

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

March 30, 2021 at 7:44 am #1715533

Leo
Staff
Customer Support

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 🙂

March 30, 2021 at 7:49 am #1715541

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”.

March 30, 2021 at 9:17 am #1715625

Leo
Staff
Customer Support

Can you disable your caching plugin first?

March 30, 2021 at 2:29 pm #1715915

Alessio

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

March 30, 2021 at 6:05 pm #1716025
Leo
Staff
Customer Support
Try this:
```
body {
    height: 100vh;
}
.main-navigation {
    position: sticky;
    top: 0;
}
```
March 31, 2021 at 4:10 am #1716390
Alessio
Hmm it works, but adding
```
body {
    height: 100vh;
}
```
breaks the layout (it adds two scrollbars to my website).
March 31, 2021 at 4:52 am #1716429

Jessica

following.

March 31, 2021 at 9:32 am #1716911
Ying
Staff
Customer Support
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 🙂
April 1, 2021 at 4:39 am #1717698
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?
April 1, 2021 at 9:27 am #1718182
Ying
Staff
Customer Support
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 🙂
April 4, 2021 at 6:00 am #1720834

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?

April 4, 2021 at 9:07 am #1721236

Ying
Staff
Customer Support

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

April 6, 2021 at 2:26 pm #1724010

Alessio

Okay!

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

April 6, 2021 at 6:36 pm #1724104

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