Anchoring Items to Edges of Wide Boxes

[mOehlschlager]

I’m building a landing page for a friend, and am stumped about how to implement her navbar.

In her PSD mockup, which is 1920px wide, she shows a 115 px tall navbar that stretches edge to edge, and below that a photo that is set to fill a wide box.

Her logotype and tagline are anchored to the left edge of the navbar with a 100 px left margin. Her “Contact” menu item is anchored to the right edge of the navbar with a 100 px right margin. Her expectation is that those items in the navbar will maintain their respective left and right alignments, even as the browser window is stretched beyond 1920 wide on a desktop monitor.

How can I achieve this in Sparkle?

[primo]

Hey!

There is a way, but it isn’t recommended at all. And if the page have vertical scrolling, everything on the nav bar will stay sticky.

First, I’ll show you how it is in preview:

As you can see on this example, both the top left “Menu” and bottom left “LinkedIn / Instagram” are way in the margin that Sparkle forces you to be within.

Here’s how it shows in Sparkle:

As you can see, the Sparkle’s visual builder will get bugged using this method, since it reproduces differently. So use it at your own risk.

WHAT I DID

First, I’ve ticked the “Allow HTML element id customization” on the project Settings:

After that, I’ve selected the specific element I wanted (in this case, is the top left button called “Menu”) and gave it a custom id under the “Code integration” field, which is “logo”, over the right hand panel:

After that, I’ve added a “Embed” widget under “+Add” and put the following code:

There you go. In your case, you would change the “left: 20px” value to “left: 100px”, or thinker around it to see what fits better.

Remember: you only will be able to see the change on preview mode, not in Sparkle’s visual builder.

Hope I’ve helped!

[mOehlschlager]

Thanks. Sounds promising. I’ll try it in the morning. (I’m in California.) I’ll let you know how it goes.

[mOehlschlager]

@duncan

I just received an email calling attention to the impending release of Sparkle 4. Is there any chance that Sparkle 4 would enable a non-coding solution to anchoring text, buttons, menus, images, etc. to any of the four sides of a flexible wide box? (See my challenge above.)

[duncan]

As mentioned in the newsletter, the features are not announced yet.

[mOehlschlager]

Okay. Thank you for your reply. I look forward to the release and announced feature updates.

[raphgara]

Hey @primo and @mOehlschlager, I am interested in sticking my menu on the left side even when scrolling. Did you manage to find a new workaround with Sparkle 4.X?
Thanks for your valuable input!
Best regards

[Mr_Fozzie]

Hi.

Would this be helpful?

Sticky Note on the right

You can use a fixed position popup to do that. Something like this: [image]

You just need to adapt it to your needs.

Mr. F.

[raphgara]

Thanks! Indeed that should make it!