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.

2 Likes

Thanks @cmarchan and @boston85719 for the input.
I’ve not had time to implement your suggestions but I’ll let you know where I net out.

I went with the collapsed margins approach with visibility conditions on the login icon. I preferred this method as I didn’t want to have duplicate elements on the page.

In my original set up, I had created one container too many that I had to configure so it was useful to pare things down a bit.

Cheers!