hello
I am experiencing an issue with the hamburger menu functionality in the Canvas theme on mobile devices. When the website is viewed on a mobile phone, clicking the hamburger menu icon does not open the navigation menu dropdown.
I have investigated the problem and found that removing the id attribute from the footer element (<footer class="dark"> instead of <footer id="footer" class="dark">) resolves the issue and the hamburger menu functions correctly.
While the fix works, I believe there might be a conflict between the Javascript code responsible for the hamburger menu and the presence of an ID on the footer element. It's possible that some Javascript in the theme is targeting the element with the ID "footer" and this might be interfering with the menu functionality in mobile view.
I haven't been able to pinpoint the exact Javascript causing the conflict, but I wanted to report this issue in case it's helpful for your development team to investigate further.
Here's some additional information that might be useful:
I am using the Canvas HTML5 template (not a WordPress theme).
I have verified that the hamburger menu functionality works correctly in the Canvas demos on mobile devices.
Here's the console log
functions.bundle.js:1331 Uncaught TypeError: Cannot read properties of null (reading 'offsetHeight')
at Object.init (functions.bundle.js:1331:43)
at stickFooterOnSmall (functions.bundle.js:758:56)
at functions.bundle.js:128:44
at Array.map (<anonymous>)
at Object.run (functions.bundle.js:127:24)
at Object.runBase (functions.bundle.js:133:10)
at Object.init (functions.bundle.js:1135:10)
at HTMLDocument.<anonymous> (functions.bundle.js:1165:19)
init @ functions.bundle.js:1331
stickFooterOnSmall @ functions.bundle.js:758
(anonymous) @ functions.bundle.js:128
run @ functions.bundle.js:127
runBase @ functions.bundle.js:133
init @ functions.bundle.js:1135
(anonymous) @ functions.bundle.js:1165
base-service.ts:155 XHR finished loading: POST "https://www.cognitoforms.com/embedContext=seamless".
(anonymous) @ xhr.js:172
t.exports @ xhr.js:11
t.exports @ dispatchRequest.js:57
Promise.then (async)
u.request @ Axios.js:53
(anonymous) @ bind.js:9
(anonymous) @ base-service.ts:155
m @ 173.225fbcd4f3847c33b963.js:1
a @ 173.225fbcd4f3847c33b963.js:1
Promise.then (async)
m @ 173.225fbcd4f3847c33b963.js:1
a @ 173.225fbcd4f3847c33b963.js:1
(anonymous) @ 173.225fbcd4f3847c33b963.js:1
(anonymous) @ 173.225fbcd4f3847c33b963.js:1
(anonymous) @ base-service.ts:168
i @ session-service.ts:54
l @ 38.9ab7e0d8ebe6c15069eb.js:1
a @ 38.9ab7e0d8ebe6c15069eb.js:1
(anonymous) @ 38.9ab7e0d8ebe6c15069eb.js:1
u @ 38.9ab7e0d8ebe6c15069eb.js:1
n.value @ session-service.ts:78
value @ internal-api.ts:194
(anonymous) @ seamless.js:1
Promise.then (async)
value @ seamless.js:1
E @ seamless.js:1
load (async)
317 @ seamless.js:1
c @ seamless.js:1
(anonymous) @ seamless.js:1
(anonymous) @ seamless.js:1
Show 5 more frames
Show less