Icon is strangely wide, ignoring Width property

I’ve added a hamburger icon to my navigation for mobile users, and I’m locking in the responsive settings at the moment.

I can’t seem to work out why it has this giant width though, forcing it to go on a second line to my logo when the screen width is reduced past a certain point:

I’ve set the width to be only 30px and can’t work out where this other width is coming from; perhaps this ‘Container’ width, combined with the margin widths? No clue how to change that though.

Any help greatly appreciated!

The responsive guide is calling out Group A and Group B. What are those?

You can check it better if you put on the grid.

Ooh, you’re on to something there! Group A is the logo on the left, however it seems this width is coming from Group B, which is the desktop menu (menu items unfinished):

However, I have a Conditional set to hide this group on mobile screens, so I assumed the group’s width would also disappear. Is there a better way to do this, or to have the space this group takes up hidden when this Conditional is set to True?

Thanks for all your help :slight_smile:

Conditionals do not hide widths. You have to use the responsive editor hiding rules “add a hiding rule when page is < x” for them to collapse horizontally. Also if any elements overlap they will behave strangely.

Also align your hamburger to right, stick your logo in a group, make it’s margins collapse at 4100 (or something big), apply a max width, drag that group all the way to your hamburger, align the hamburger to right and that should work out.

1 Like

Dude you are AMAZING!! Thank you SO much for taking the time to film this, you’ve seriously just solved all the confusion and frustration I had yesterday. Thank you, explained it so well. If you’re ever in Sydney I owe you a beer!