Collapsible menu when narrow browser window

Ask the community
,
1

Guys, when I narrow my browser window, I need the horizontal menu to collapse into a hamburger menu. Is there any function for it? Otherwise the elements on the side of the menu get cut off.
Thanks

2

Hi, in EditorX it’s very simple (no code needed) as you can use different elements based on the window width.

For the classic editor you may be able to do it with some code (I don’t like it so much but that’s what you maybe able do with the classic editor):
Set interval to detect the window dimensions every X millisecond, and if the width is smaller than Y .collpase() menu1 and .expand() menu2 and vice versa.

P.S. I’ve never tested the latter option.

3

Thanks, I already did this and it works quiet well.
Editor X is missing some other features so the usual Editor still wins

Thanks for input :slight_smile:

4

Hi Hana! Any chance you could share the code you used to make it work? Thanks!

5

Hi @philip-bergman
the whole script:

import wixWindow from ‘wix-window’ ; //at top of the code page

$w . onReady ( function () {
if ( wixWindow . formFactor === “Desktop” ){
// Write your JavaScript here
$w ( “#horizontalMenu1, #vectorImage6, #languageSelector43” ). hide ();

$w . onReady (() => {
setInterval (() => { detectScreenSizeChange ();}, 100 );
});

function detectScreenSizeChange (){
wixWindow . getBoundingRect ()
. then ( winInfo => {
let winWidth = winInfo . window . width ;
if ( winWidth < 1200 ){
$w ( “#vectorImage6” ). show ();
$w ( “#horizontalMenu1” ). hide ();
$w ( “#languageSelector43” ). hide ();
} else {
$w ( “#vectorImage6” ). hide ();
$w ( “#horizontalMenu1” ). show ();
$w ( “#languageSelector43” ). show ();
}
});
}
}
// Write your JavaScript here

// To select an element by ID use: $w(“#elementID”)

// Click “Preview” to run your code
});

End of the script.

#vectorImage6 = hamburger menu image (linked to sidebar with menu)
winWidth - should be chosen based on the size of the horizontal menu
setInterval - 100 works good

This needs to be pasted on each page

Hope it will help :slight_smile: