Sticky navigation

See - This is probably where I’m lacking. I’ve named the menu to be sticky ‘menu’ as per the code, but I have no idea how to link the header and all of that. Is there a link to a place where I can research this?

So, I got it kinda working, but it has this weird glitch. Can anybody help me track down what it is?

www.joelhager.com/eat

Thanks!

actually position : fixed does only work propper within responsive layouts.
may be fixed with next hypeversion¿

So how I do go about fixing that? make it responsive and make layout options?

3.03 fixes it for me, though I can’t figure out why it wasn’t working in 3.02. Very, very strange.

could you share the document¿

Here she is! I’m sure I’m doing something wrong… hahahaha

Eat Concept.zip (4.1 MB)

Hi Joel, try adding this to your HTML Header…

<style>
.sticky{
position: fixed !important; margin-left: 173px; 
}
</style>

I’ve been trying to add margins (left or right) to the HTML Header and it seems to working without checking the 100% scale checkboxes - it might blow up though when resized - still experimenting

setting the margin-left to 220px fixed it on my end. Isn’t that a resolution-dependent solution, thought?

I think you are correct, but we’re getting closer!

Yeah, at 100% zoom it lines up, but any other direction and it shifts again. Is there a code for centering something? Can I put it in a container?

Try one more margin idea…

position: fixed !important; margin-left: 10.85%;

EDIT: Scratch this suggestion, it does break at different resolutions.

greg

I think I found a work-around for fixed items. If you put all of the elements you want fixed into a group it seems to work properly without having to use scaling or responsive layouts.
fixed_Pos_grouped.hype.zip (10.5 KB)

I have the navbar in a group. In which way are you meaning? Thanks!

Is it a group or a symbol?

A group within a symbol.

what I see happening is that fixed elements will shift to the left as they are seeing the browser width as the parent and not the Hype window as the parent. When you place your elements in a group, the group becomes the parent.

Hmmmm… So if I delete the symbol, and make the group the new ‘symbol’ per se, I can specify the width via the group handles so it keeps scale? Is that what you’re meaning?

work on a copy please