The value passed to the element selector function (usually $w), must be of type string

Hey I’m having a little problem with my code it keeps putting up “The value passed to the element selector function (usually $w), must be of type string” whenever I click my Home and About button

I’m trying to build a mega menu

Here’s the second half

In your code you’re treating the menuItems as if it was an array, but it’s actually just an object.
So either change it to be an array or change your script to handle an object.

How would I go about doing that I’m new to coding
const menuItems = {
Home : {

  button :  '#Home' , 

  underline :  '#HomeLine' , 

  //contentBox: '#HomeBox' 


Shop : {

  button :  '#Shop' , 

  underline :  '#ShopLine' , 

  contentBox :  '#ShopBox' 


FAQ : {

  button :  '#FAQ' , 

  underline :  '#FAQLine' , 

  //contentBox: '#kidsBox' 


About : {

  button :  '#About' , 

  underline :  '#AboutLine' , 

  //contentBox: '#kidsBox' 


$w.onReady( function () {

function initMegaMenu () {
for (let i in menuItems) {
$w(menuItems[i].button).onMouseIn(() => {

$w(menuItems[i].contentBox).onMouseOut(() => {

async function openRelevantPanel ( hoverItem ) {
for ( let i in menuItems) {
if (menuItems[i] === hoverItem) {
await $w(menuItems[i].contentBox).expand();
} else {

Do something like:

const menuItems = ['Home', 'About', 'Shop',/*etc..*/];
$w.onReady(() => {
menuItems.forEach(e => {
$w('#' +e).onMouseIn(event => {
$w('#' +e).onMouseOut(event => {

Ok thanks that part works. But now I’m trying to get it to open a #ShopBox with the shop button and #AboutBox with the about button.

And it keeps putting up flags.

Sorry I’m really bad with this stuff

Check the property ID of the boxes. It should be case-sensitive. Make sure it’s spelled correctly.

ok thanks

ok so now how do I keep the box open when I hover over it and then close it when the mouse is off the box

And the box only shows up on the test page. I want it to show up on every page

I have the code set to the mastePage.js