Need menu to collapse when browser window is narrow

Ask the community
,
2

Do you have already some code?

You are talking about →

I’ve seen a couple posts about it, but nobody detailing specifically how to do this.
Where are the links to the posts you already have read?

Yes → getBoundingRect( ) is the right direction…
https://www.wix.com/velo/reference/wix-window/getboundingrect

Perhaps you could/should generate your code on a public JS-file to ensure, that you can communicate between MASTER-PAGE and NORMAL-SITE-PAGE.

MASTER-PAGE → HEADER-SECTION (marked orange in editor)
NORMAL-PAGE → BODY-SECTION (marked blue)

So you want to COLLAPSE your MENU in your HEADER-SECTION, when it reaches a certain SCREEN-WIDTH.

I think you will have to work with → setInterval(), which will start an interval-looping every couple of seconds or even milliseconds (attention can slow down, or even overload your browser), to detect the current WIDTH of your Browsers-Window-WIDTH.

https://www.w3schools.com/jsref/met_win_setinterval.asp

So, when your page is ready…

$w.onReady(()=>{  console.log("My page is ready now.") });

You will start your checking function → checkWindowSize() ← to check the current Window-Size every specific TIME-INTERVAL.

$w.onReady(()=>{console.log("My page is ready now.") 
    //starting the interval
    let myCheckInterval = setInterval(checkWindowSize(), 1000); //every second
});

Now you generate your → checkWindowSize() - function <—

function checkWindowSize() {
	//define here what to do every SECOND! ---> getBoundingRect.......
	...
	...
	...
	...
	...
}

And you also can stop your interval if a specific statement is → true or false… (using a simple if-else-statement/query)…

if (true) { console.log("Do something!") }
else { console.log("Do something else!) }