Sticky menu not functioning once navigated off the page

I have got a horizontal menu that appears and disappears when you scroll away from the header. This works on all pages when I start the preview on the page but when I navigate to another page the menu gets stuck in the state that it was in when I navigated away. There is only one page with sub pages that it works on every time even if I navigate to that page. I have put the code into the site box so it should work on every page, and all the elements are toggled to be on every page or is the header. Iā€™m not sure what Iā€™m missing?

export function header1_viewportLeave(menuAppear) {
menuAppear=$w(ā€œ#MainMenuā€).show(), $w(ā€œ#MainMenuBackgroundā€).show()
;}

export function header1_viewportEnter(menuDisappear) {
menuDisappear=$w(ā€œ#MainMenuā€).hide(), $w(ā€œ#MainMenuBackgroundā€).hide()
;}


or


if the menu is hidden when I navigate away.

Hey,
Iā€™m not sure that I fully understand the scenario. Please send us a video of the issue using screencast . Simply recreate the issue while recording the steps and add the screencast.com URL to your response. Moreover, please send us the site URL.

Thanks,
Tal.

Here is the screen capture. The website is meanwhileontheroad.com and the page that the menu consistently works on is the gallery page meanwhileontheroad.com/gallery

https://www.screencast.com/t/uHNVHwFhjO

Hi,

We recommend to avoid using commas when executing multiple statements. Instead, you should separate each statement using ā€™ ; '. Moreover, we recommend writing each statement on a different line .

In order to resolve the issue, please add the following code to your site section:

$w.onReady(function () {
	$w("#MainMenu").collapse();
	
	
	$w("#MainMenuBackground").collapse();
});
export function header1_viewportLeave(e) {
		$w("#MainMenu").expand();
		$w("#MainMenuBackground").expand();
}
export function header1_viewportEnter(e) {
		$w("#MainMenu").collapse();
		$w("#MainMenuBackground").collapse();
}

Have a good day,
Tal.

1 Like

Thanks Tal, that seems to have fixed the problem :slight_smile:

1 Like

$w.onReady(function () {
$w(ā€œ#Menu2ā€).collapse();

});

export function header1_viewportLeave() {
$w(ā€œ#Menu2ā€).expand();
}
export function header1_viewportEnter() {
$w(ā€œ#Menu2ā€).collapse();
}

I have tried this similiar with just one menu on the header and code in site section. Is part of my code wrong? Can not get it to work.

Mike