Need menu to collapse when browser window is narrow

Ask the community
,
1

Hey there. So I need some help writing a single snippet of code. My website currently has a menu that is stretched the full length of the page, but adjusted to the right. So when as make the browser window smaller, the menu moves towards the left of the header. Currently, if you do this, the header does not collapse, and instead reaches a point where it overlaps an image on the header and gets cut off if the window is small enough.

All I want is to detect when the browser window is at a certain length, and if it is at that length, to then collapse my menu into a hamburger menu on the header, similar to mobile. I’ve seen a couple posts about it, but nobody detailing specifically how to do this.

The only piece I know so far is
getBoundingRect( )
From what I know it can be used to detect the size of a window. But then what? Would I be able to use
collapse( ) on the horizontal menu and expand( ) on the hamburger menu? If so, I know nothing about code, so I’m not sure how to even write it.

Any help is much appreciated!

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!) }
3

Thank you! this is very helpful! I have no code whatsoever yet, as I have little to no experience in coding. I am playing around with dev mode right now on a copy of my site to see what I can do.

The two topics I saw were these

https://www.wix.com/velo/forum/site-page-design/collapsible-menu-when-narrow-browser-window

https://www.wix.com/velo/forum/site-page-design/collapsible-menu-when-narrow-browser-window

The first one gave me an idea of where to start, as it seems the user was successful in doing what I’m trying to achieve, but unfortunately I wasn’t able to make much sense of it.

What would I have to do within the checkWindowsize function in order to have it detect when the window is at 1600px width or less? That’s the size where if it’s less than that I would like the current menu to collapse and the hamburger menu to expand. Similarly for the opposite to be true as well, and for the original menu to expand once the window is resized back to over 1600px and the hamburger menu to collapse.

4

@inuxen
Put this code into your page… (it will show you every 3-seconds all the data you want → widths and heights…

import wixWindow from'wix-window';

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

function checkWindowSize() {
//define here what to do every 3-SECONDS! ---> getBoundingRect.......
  wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
    let winHeight=windowSizeInfo.window.height;   console.log("winHeight: ",winHeight)
    let winWidth=windowSizeInfo.window.width;     console.log("winWidth: ",winWidth)
    let docHeight=windowSizeInfo.document.height; console.log("docHeight: ",docHeight)
    let docWidth=windowSizeInfo.document.width;   console.log("docWidth: ",docWidth)
  });
}

Now try to resize your BROWSER-WINDOW → see what happens in the CONSOLE.

How to use → CONSOLE ?
If you are using for example google-chrome → press F12 and navigate to —> CONSOLE! → Take a look onto all the given logs!

Have fun & good-luck :wink:

5

@russian-dima Heyo! I’ve been playing around with it a bit more and yep! I do see that it detects the size of the window every 3 seconds! What code would I add to make the current long menu collapse into a hamburger/drop down menu once the window is at 1600px width or less?

https://xenguy.wixsite.com/website-1

Right now if you resize the window, the menu intersects with the logo in the middle of the header once the window is at less than 1600px width, I just want it to not intersect and instead make the hamburger menu appear instead, hopefully this makes sense!

6

@inuxen

import wixWindow from'wix-window';

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

function checkWindowSize() {
//define here what to do every 3-SECONDS! ---> getBoundingRect.......
  wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
    let winHeight=windowSizeInfo.window.height;   console.log("winHeight: ",winHeight)
    let winWidth=windowSizeInfo.window.width;     console.log("winWidth: ",winWidth)
    let docHeight=windowSizeInfo.document.height; console.log("docHeight: ",docHeight)
    let docWidth=windowSizeInfo.document.width;   console.log("docWidth: ",docWidth)

    if(winWidth<1600 || docWidth<1600) {$w('#myWantedElementIDhere').hide('fade');}
    else {$w('#myWantedElementIDhere').show('fade');}
  });
}
1 Like