Hidden Group Causing Header To Expand Height

Have a group of Nav buttons when page is more than 668 pxls, when less it hides and a sidebar menu sandwich appears - but as the page collapses that hidden group causes the header to increase in size and the sandwich icon to move to a line underneath.

I would like the header to maintain its height (appx 150 pxls) and the sandwich to right align but push closer to logo as page collapses.

Any suggestions?

Have you tried selecting the option to “collapse the group when hidden” ? That may do it for you.

@1danielbaker - do you mean "collapse margins when container width <= " - I had this activated in the previous photo but it was not behaving as I thought. I don’t see the exact option you mentioned.

I was referring to the actual element setting (the group)

The bottom check in this picture

Yeah tried it did not work - I almost feel like there should be a “collapse this elements width” - thats what I feel I need - but I’m sure I’m missing something.

What its trying to do is keep the margins as big as possible. One workaround for this is to fill the horizontal gap between elements.with a group or shape that has min width 0%.

The other thing is to make the group hide, not just “be an invisible elephant”, try the “Add hiding rule” on the responsive screen settings (fourth line in your screenshot). It depends solely on page width or container width (can’t remember which haha). You may then no longer need to set the visibility setting.

3 Likes

@mishav - For some reason the “Add hiding rule” didn’t work at first. I tried a few days ago and had similar results…tried again this morning on a whim and it was indeed the fix!

Thank you @mishav and @1danielbaker