Aligning a code snippet in the grid

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:
image
For the #menu add a class of ‘align-self-center’ and change the CSS to get rid of these rules:
image
I think that will accomplish what you want.
Let me know,
Bob

1 Like

Bob you are right, I appreciate your help. Thanks very much!