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 
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.
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!
