I am not sure of the best way to align this hamburger menu (the hamburger is adapted css/html/javascript from a codepen example)
It appears to be aligned correctly on all devices. Testing on my iphone it renders perfectly in portrait mode but when I turn my iphone on its side look at there the menu ends up (when it should be mirrored in the same position as the shop icon).
The question really is - how to centre a code snippet in a grid section I guess.
You are applying absolute positioning to the menu. This overrides the grid positioning.
For the #menu-bar change the CSS to get rid of these rules:
For the #menu add a class of ‘align-self-center’ and change the CSS to get rid of these rules:
I think that will accomplish what you want.
Let me know,
Bob