[Resolved] Sticky menu not being generated

[Jay Martin]

For some unknown reason my sticky menus don’t work anymore. I checked the many Support posts dealing with sticky menus not appearing/working, but none are directly relevant (I think) to this problem.

I have always enabled sticky menus in all of my GP-based sites:

• Sticky enabled for both desktop and mobile
• Sticky transition is “Slide”
• Menu height is blank (default)

It’s always worked great in the past, never any problems.

Using Chrome Inspector, I discovered that while the BODY element has all the usual “sticky” classes assigned, the actual NAV element comprising the sticky menu (‘#sticky-navigation’) is no where to be seen.

What could possibly cause the loss of generation of the sticky menu?

In other words…what have I broken this time? 😉

[Leo]

Hi there,

Hmm we haven’t received any reports on this yet.

I’m assuming you’ve already tried disable all non-GP plugins to test?

Can you provide a link to your site? Thanks!

[Jay Martin]

Hi Leo,

No, I have not tried disabling all non-GP plugins, as my site would cease to function, sorry. However, I have a parallel site (the actual public production site) that contains the same collection of plugins, configured in the very same manner as my development system on which the sticky menu failure is happening, but that site works fine.

I went through a number of config exercises in which I turned on/off the sticky capability for various combos of mobile, desktop, none, etc., but in every case in which the sticky should have been present, it wasn’t.

Again, to be real clear about this — it’s not that the sticky menu “doesn’t work”; rather, the sticky menu is not being generated in the HTML at all, even in spite of the fact that the BODY class list contains various sticky-related classes, including the sticky-enabled class. Here is a copy-n-paste of the BODY class attribute value:

page-template-default page page-id-602 logged-in admin-bar no-customize-support post-image-below-header post-image-aligned-center sticky-menu-fade sticky-enabled both-sticky-menu mobile-header mobile-header-logo mobile-header-sticky no-sidebar nav-below-header contained-header separate-containers active-footer-widgets-0 nav-aligned-left header-aligned-left dropdown-hover js

This makes it appear that GP believes the sticky menu should be present, and yet the sticky NAV element is nowhere to be seen in the HTML content.

So what circumstances would refrain the NAV#sticky-navigation element from being generated, given this evidence?

[Jay Martin]

Well, I discovered the problem, and of course it’s not GeneratePress’ fault, although the cause and effect is confusing.

It turns out an external JavaScript file being imported had a syntax error. Now, I thought the general process flow in this case would be such that execution of that script would immediately cease (and an error generated), but other JS-related imports would be handled in the normal manner.

But one would wonder, “Why would a JS parsing error affect the generation of HTML on the backend?” Shouldn’t that content already be produced and downloaded to the browser before the JS is parsed?

Or does GP create the sticky menu(s) on the fly via JavaScript during (or on) page load?

In any event, my problem no longer exists. Hopefully this thread will be helpful to posterity.

[Tom]

GP clones the primary navigation to create the sticky navigation using javascript.

Glad you found the solution 🙂

[Author]

Posts