Help with StickyNav & Menu Bar

Hi again Hypies,

The menu bar action of scrolling and attaching to the sticky header up top is what I have actually been able to complete. But, only in one layout (mobile layout only). I am wanting to add the function of making the menu bar attach or stick to the header in multiple layouts where the menu bar(s) in each layout are doing the same function. Does this mean that I would have to make ‘menu’ a class element instead in the JS Code? If so, what do I type or do? What is an alternative method?



Thanks in advance,
tg2k

you can set a common class for each “menu” in each layout in the inspector and then run

	const sceneElement = document.getElementById(hypeDocument.currentSceneId());
	const yourUniqueMenuElement = sceneElement.querySelector(".classNameOfYourChoice");

instead of

hypeDocument.getElementById('id')

In the red, all I did was rename after I replaced what you mentioned in the js function and the class in the inspector, I named it just that. Is this right because it is still not working?
04%20AM

Thank you for taking the time Claßen!

“yourUniqueMenuElement” was an example to state out it’ll be as unique as the example usings ids … thought it’ll be clear … :slight_smile:
in your previous posted script it’s been called “el”. so you have to unify this.

and note the point:

the point identifies “classNameOfYourChoice” as class

1 Like

additional to mention:
any modifying of hypeelements outside of Hypes “knowledge” (which applying styles like sticky or fixed is …) can lead to unexpected results …
Hype does not offer sticky nor fixed and so it’s not supported …

1 Like

@tg2k

So with those warnings of “unexpected results” in mind…

I added Hans’ suggested code to the existing script in the “Sticky” function:

const sceneElement = document.getElementById(hypeDocument.currentSceneId());
const el = sceneElement.querySelector(".Navbar");

I kept “el” as the variable that is already used throughout the script - less changes needed.

The navigation menu already had a class of “Navbar” so I used that in the code; the “stickiness” effect is all I have tested - and the above script changes worked for me.

1 Like

@JimScott
Can you attach a sample hype document?

Thanks,
tg2k

Here it is: Eat_Concept-v2a.hype.zip (853.1 KB)


As I mentioned in my last post I have only tested @h_classen’s suggested code change regarding the “stickiness” effect. I have not checked out how my changes might affect other aspects re: the functionality of this Hype file; though I don’t think there will be an issue.

Also, I had to eliminate a 3 MB image (“img_9570”) in order to get this file to fit the Forum’s guidelines for file size (3MB max).