[Resolved] Sticky Menu Advice

[Ian]

I have been relentlessly working on this issue for hours with much trial and error and can’t make anything work. Hopefully, someone can give me some advice as to the easiest way to do this.

I want a sticky menu using GP Premium. Unfortunately, the desired style of the menu is not offered in GPP, so I’ll be using Elementor Pro’s Nav Menu widget to create the menu.

Above the menu is a header, so I’m using the Header Footer Elementor plugin to implement it.

To avoid a plugin, I initially tried Flint Skin’s YouTube tutorial of adding a bit of PHP to accomplish this, to no avail.

I’ve also tried MyStickyMenu, using info acquired elsewhere in this forum. No go. I also gave a try to
the Sticky Menu (or Anything!) on Scroll plugin and got nowhere.

I’ve indicated “no navigation” in GP’s customizer, figuring that’s what is called for; I don’t want the GP menu showing, I want an Elementor-made menu.

Can anyone provide me with some direct instructions that will give me this needed functionality? Seems to me it should be easier than it’s become!

[Leo]

Hi there,

Can you link me to your site?

Thanks!

[Ian]

Leo,
I’m currently working on this on a local site on my machine, which I could clone to an accessible site, if necessary. Is there something you’re going to see or find there that’s relevant? And if so, how should I set things up? I’ve gone through so many iterations of trying this, I’m not sure of where I currently am!
Ian

[Tom]

The GPP sticky menu javascript is built specifically for the GP menu, so unfortunately it won’t work with a third party menu.

You would have to find something specific to Elementor, or use one of those sticky anything plugins (there’s a few), and add the Elementor nav ID as the target.

[Ian]

Thanks for getting involved in this, Tom – especially at such a late time of night!

I’d really like to try getting this implemented the way I originally tried: with no added plugin and using the bit of PHP code that Flint Skin used in his demo video of a few weeks ago. Note that he’s doing so with GPP and Elementor Pro – the same two things I’m trying to use. He’s also using Code Snippets, which I’ve employed for some other uses on the site, hence not needing another plugin.

His directions are straightforward and sensible:

1. Create two menus in GP: blank and sticky menu. Blank has literally nothing in it and sticky menu has what I want to show.
2. Using Elementor’s Nav Menu widget, create the sticky menu as a template, noting the ID of the template.
3. Paste the PHP code into Code Snippets, indicating within the template ID of the sticky menu.
4. Set the blank menu as the primary menu.

In my case, the ID of the sticky menu template is 157.

I’ve got the site posted here: https://bluebarn.websmith.online/ The results are, to state it directly, quite freaky.

The menu I want is the light grey one that’s just below the blue barn logo. Despite currently indicating the blank menu as the primary one, it’s kind of there – but beneath another copy of the sticky menu! Note that neither is sticky. Sigh.

As previously noted, I’ve followed the directions to the nth degree and nothing is ever becoming sticky like it should. The only derivation I have from the directions is that I’m using the Header Footer Elementor plugin and believe I have to because of the header design limitations within GPP.

When trying this with MyStickyMenu, by the way, I deactivated the PHP code and indicated 157 (and also #157 – the directions aren’t specific) in the sticky class and that wouldn’t work either.

[Tom]

The way you have it set up is exactly as David has intended in his video. Now you would remove the menu which is directly under the logo.

That will bring the nav with the background up higher.

Then you can remove the color of the navigation in Customize > Colors > Primary Navigation, and enable the sticky navigation options.

[Ian]

Success!

Thank you so much for your help, Tom. Very appreciated by this WP newbie.

[Tom]

You’re very welcome 🙂

[Author]

Posts