Forum Academy Marketplace Showcase Pricing Features

Align Elements in group when screen resizes

Hi there,
I’ve create a few buttons in my top nav for “Sign Up” and “Log In”. When a screen is under 1200px, I’ve set the Log In button to hide and using hiding rules, and an “account” icon is set to appear in its place. All of this is working as expected, however, I having trouble getting the “Sign Up” button to shift right to align more closely with the “account” icon. It eventually aligns, but only at 300px.

Current configurations:

Parent container
Screen Shot 2021-02-22 at 8.36.57 AM

Sign Up Button
Screen Shot 2021-02-22 at 8.48.01 AM

Log In Button
Screen Shot 2021-02-22 at 8.37.04 AM

Current result
Screen Shot 2021-02-22 at 8.37.20 AM

Hello @neal.aaron.m

Create a second group of elements where you have the signup button closer to the icon. Show it conditionally while hiding the current group. Make sure you copy/paste with workflows so that you do not have to create them manually.

Hope this helps. :+1:t2:

Try setting on the signup button a collapse margins when and make it set up so it is when the login button is hidden. This could make it so the signup button stretches to meet the user icon. To ensure the signup button doesn’t encroach too much on the user icon, put the user icon into a group and set up the margins there.

That way when the signup button margins are collapsed, it will reach the group surrounding the user icon.

1 Like