I am trying to get a header to function properly as a responsive design. I understand the responsive design ideas. I had the header working correctly. Then when copying and pasting with workflows to other pages ( Yes I know about Reuseable Elements ) the responsiveness started to have a really strange and for me, unexplainable, behavior.
This is the page setup
The floating header setup
This is the group inside of the floating group. This group has conditionals to show/hide based on page width.
My hamburger Icon set up with conditionals
And the Logo Icon set up
The weird behavior is that everything works as it should, except when the page width is between 969 and 856 px the hamburger icon is pushed to a lower level, but above 969 and below 856 everything is as should be.
Notice the numbers in left hand side of grey group…Below is 1025 page width, and the responsiveness is as expected.
Here the page width is below 1024 but greater than 969 (working as expected)
Here it is at 969 and not working as it should
And finally here it is again at 855 and working as expected
As could be seen in the set up images there are no other elements in the floating group besides the group for header navigation containing text elements. This group is set to be not visible when page width is less than 1024…it functions fine.
There is the company icon in the left hand side. Additionally there is the hamburger icon which is set to be visible when page width is less than 1024.
The only other element is the group focus which is the menu that shows when the hamburger icon is clicked. I don’t think this has anything to do with the responsiveness issue of the floating group header, for two reasons…one, it shouldn’t has it is not contained in the floating group and two, I tested it by deleting the group focus and the issue remained.
Any ideas of what might be the reason for this? Others experience something similar and found a fix, or is it a bug?