Mobile menu hamburger not working on direct mobile width loa

Hello @mattyg77,

I tried reproducing the issue by using : 'composer require 'drupal/dxpr_theme:^6.0@RC'' but I think the issue has been resolved in 6.0.0-rc2.
As when I tried reproducing the issue using the above command, the version 6.0.0-rc2 was installed automatically and the issue was not found in that version.

Please have a look on this, attaching a screenshot for the same.

Hi anish.ir,

I updated to rc2 and took the same steps and it is still happening. I am not using any custom javascript.

Here is an error in Dev Console:

Uncaught TypeError: Cannot read properties of null (reading 'style')
at js_xUvbOUb1aoazaSn0-…r6S9ceFLT:228:10232
at js_xUvbOUb1aoazaSn0-…r6S9ceFLT:228:11717

Gemini AI assitant

The error "Uncaught TypeError: Cannot read properties of null (reading 'style')" means your JavaScript code is trying to access the style property of an element that doesn't exist (is null). In your provided code snippet, this happens in several places:

document.querySelector(".dxpr-theme-boxed-container").style.overflow="hidden";
This line attempts to find an element with the class dxpr-theme-boxed-container and then modify its overflow style. If no element with this class exists in the DOM when this code runs, document.querySelector() returns null. Trying to access .style of null causes the error.
document.querySelector("#toolbar-bar").classList.add("header-mobile-fixed");
Similar to the previous point, this line searches for an element with the ID toolbar-bar. If the element isn't found, document.querySelector() returns null, and attempting to use classList on null throws the error.
var v=document.querySelector("#secondary-header"); v&&(v.style.marginTop="".concat(s,"px"))
This line searches for an element with the ID secondary-header. If it doesn't exist, v will be null. The && operator short-circuits, so if v is null, the code after && is not executed, preventing an error in this specific line. However, if s is not defined correctly elsewhere in your code, attempting to concatenate with it could lead to separate errors in other parts of the code which may not be evident in the provided snippet.
var y=document.querySelector("#navbar"); (and subsequent uses of y)
If an element with the ID navbar is not present in the DOM when this line executes, y will be null. Any later attempt to use y.classList.add(...) or other properties will result in the error.
How to Fix It:

Check Element Existence: Before manipulating any element's style or class, always check if the element exists. Use optional chaining (?.) or a conditional check:

const boxedContainer = document.querySelector(".dxpr-theme-boxed-container");
if (boxedContainer) {
boxedContainer.style.overflow = "hidden";
} else {
console.warn("Element with class 'dxpr-theme-boxed-container' not found.");
// Handle the case where the element is missing – maybe add a default behavior or log a more detailed error
}

const toolbarBar = document.querySelector("#toolbar-bar");
if (toolbarBar) {
toolbarBar.classList.add("header-mobile-fixed");
} else {
console.warn("Element with id 'toolbar-bar' not found.");
}

// ... similar checks for #secondary-header and #navbar ...