Sticky header not working on phone/tablet/computer

Summary

On mobile, the hamburger (mobile menu opener) and header search icon do nothing for guest users (Incognito). When logged in to WP, they work. Desktop behaves differently: I can see the left mega/categories drawer from the Mega Electronics demo, but on mobile the hamburger never opens any panel.

Feels like a guest-only JS/optimization conflict or a header builder binding issue. I’ve tried the usual caching/optimization resets and multiple header/menu configurations. Looking for help identifying the exact cause and the correct setup.

Site / Environment

Theme: WoodMart: Mega Electronics
Theme: WoodMart (parent) + WoodMart Child
Elementor Pro
WooCommerce

Hosting: SiteGround

Caching/optimization in use: SiteGround Optimizer (SGO)

What I’m trying to achieve

Desktop

Keep my green top menu

Keep the Mega Electronics style categories drawer for shop categories.

Mobile

Have one working hamburger that opens an off-canvas panel.

Inside that panel, ideally two tabs:

Menu = my page links

Shop = the categories drawer (the Mega Electronics categories)

I’m also OK with only the categories drawer on mobile if that’s simpler—but the hamburger needs to open something for guests.

Symptoms

Mobile (guest / Incognito):

Tapping hamburger → URL changes to /# (or nothing happens), no panel opens.

Tapping search icon → nothing happens.

Mobile (logged-in to WP):

Hamburger opens normally; search works → suggests guest-only JS issue.

Desktop:

Left Mega Electronics categories drawer works.

(Resolved) I removed an extra hamburger that appeared next to “Home” via header builder/CSS.

Reproduction steps

Open site on a phone (or desktop with mobile emulation) in Incognito/Private mode (not logged in).

Tap the hamburger in the header → nothing opens (or URL changes to /#).

Tap the search icon → nothing opens.

Log in to WP, reload → now hamburger/search work.

What’s currently configured (Header Builder)

Desktop Header

Header bottom: Sticky navigation + Main menu (green links) + Social icons.

Mega Electronics categories drawer visible on desktop.

Mobile Header

Mobile menu element present.

Choose menu = Main navigation (I also tested assigning the “Mobile Categories Mega electronics” menu).

Tried enabling the Categories tab inside Mobile menu (to make Menu | Shop tabs) → still no open action on guests.

Menus (Appearance → Menus)

Main navigation = Home, Gear Shop, Training, Bearfort Brief, Ridge Report, About.

Mobile Categories Mega electronics = Demo categories from Mega Electronics (used for the categories drawer).

Mobile menu locations assigned (tested both Main navigation and the Mega Electronics menu).

Console (guest)

Before clicking anything, I see:

Refused to apply style from /wp-content/uploads/stock-ticker-custom.css … MIME type ‘text/html’

Mixed content warning for one font requested via http:// (blocked on HTTPS).

jQuery Migrate present.
These don’t seem directly related to header toggles, but mentioning for completeness.

When tapping hamburger/search: no new console error appears.

What I’ve tried (and results)

Caching/Optimization (SGO & Elementor)

Turned OFF (for testing) in SiteGround Optimizer: Minify JS, Combine JS, Defer JS, Delay JS execution, Minify/Combine CSS.

Purged SG cache (and browser cache), Elementor → Tools → Regenerate CSS & Data.

Also toggled WoodMart → Theme Settings → Performance to default/off.
Result: Still broken for guests (Incognito). Logged-in works.

Header Builder configurations

Verified Mobile menu element exists and is assigned to Main navigation (and tested Mobile Categories Mega electronics).

Tried enabling Mobile menu Categories tab (to show Menu | Shop).

Verified the “Full screen menu / burger” style toggles are OFF where appropriate.
Result: No change—guest clicks don’t open the drawer.

Remove possible blockers

Checked custom CSS for pointer-events:none; or z-index overlays → none on header icons.

(On desktop) removed the extra sticky/hamburger element next to “Home”; this was separate and is resolved.

Alternate openers / custom HTML trigger

Added a Custom HTML button and programmatically tried to trigger common openers:
.mobile-nav-icon, .wd-open-mobile-menu, .wd-open-mobile-sidebar, .wd-open-side, .menu-opener and $(‘body’).trigger(‘wdMobileNavOpen’).

Result: No effect for guests → suggests the core mobile menu JS isn’t binding/firing when not logged-in.

Incognito vs logged-in differential

Works while logged-in, fails for guests → strongly suggests JS optimization order, dependency, or scope issue for unauthenticated users.

Custom CSS in use

I have brand styling in Appearance → Customize → Additional CSS and in WoodMart → Theme Settings → Custom CSS (colors, typography, spacing).

No pointer-events:none on header or icons.

No large fixed overlays covering the header.

I can provide the full CSS if needed (it’s mostly visual styling).

What I need from XTemos

Identify the exact JS/CSS handles/files WoodMart needs not to be deferred/combined/delayed so the mobile menu & search openers bind for guests. (I’ll add exclusions in SGO or disable specific optimizations.)

e.g., confirm the main file(s) and event hooks: woodmart-theme.min.js, woodmart-*.js, required jQuery order, etc.

Confirm the recommended setup to show Menu | Shop tabs inside the mobile off-canvas drawer:

Tab 1 = Main navigation (pages)

Tab 2 = Mobile Categories Mega electronics (categories)

Any gotchas with the Mega Electronics demo categories on mobile?

Whether the MIME type error for stock-ticker-custom.css or the HTTP font warning could interfere with WoodMart’s header scripts (I can fix these, just want to confirm they’re unrelated).

If there’s a known conflict with SiteGround Optimizer and WoodMart mobile header, a doc or a list of required exclusions would be perfect.

Temporary workarounds I can use (if you advise)

A dedicated /menu/ page linked from a header button for mobile users (until the off-canvas works).

Or using only the categories drawer as the mobile off-canvas (I’m fine with that if it’s the supported approach).

Hello

Thank you for the detailed description and troubleshooting steps you have already performed. Based on your report, the issue is very likely caused by JavaScript optimization settings in SiteGround Optimizer affecting the loading and execution order of WoodMart’s core scripts for guest users.

Temporarily disable all JavaScript optimization options in SiteGround Optimizer (Minify, Combine, Defer, Delay JS) and clear all caches. Test if the mobile menu and search icons open correctly for guests. This confirms the optimization is the root cause.

If you want us to review your staging site setup directly, please share admin access credentials via the Private content field.

Kind Regards

Thank you for the quick response. I would like your assistance with trying to correct this issue please.

apologies for today.

Following up to ensure you are good now.

Hello,

I noticed that all optimization features are still active. Could you please temporarily disable them so we can test how the menu functions without a theme to determine if they have any impact on the theme?

Thank you,
Kind Regards

I have just disabled them for you. sorry about that. I wasn’t sure when you would be going in to review.

Just an update. after disabling everything that i disabled, it appears to be working now. both for computer and phone. not sure if you actually did anything, but when I click the hamburger on mobile and desktop, it works now. interesting.

So it seems like some of these options actually break your website scripts. Now you need to identify which one. Try to enable them one by one and test your website functionality every time. Let us know about the result.

It looks like we are good. The issue was 2 separate items: Combine JavaScript File and Defer Render-blocking JavaScript

I’m leaving these 2 off for now.

[Author]

Posts