# Aligning a code snippet in the grid

**URL:** https://forum.pinegrow.com/t/aligning-a-code-snippet-in-the-grid/4576
**Category:** Questions
**Created:** [October 3, 2020, 4:59am UTC](https://forum.pinegrow.com/t/aligning-a-code-snippet-in-the-grid/4576 "2020-10-03T04:59:30Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)
#### Post date: [October 3, 2020, 4:59am UTC](https://forum.pinegrow.com/t/aligning-a-code-snippet-in-the-grid/4576/1 "2020-10-03T04:59:31Z")

</div>

> **[Blank Template for Bootstrap](https://dev.scatbags.com/)**

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.

 ![IMG_0790.PNG](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fab09db37a50a84d468deeb4530375b3cc8689ff.jpeg)

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [October 3, 2020, 12:46pm UTC](https://forum.pinegrow.com/t/aligning-a-code-snippet-in-the-grid/4576/2 "2020-10-03T12:46:34Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f73468a108cc601fcc1202bdbf364b04159adf61.png)  
For the #menu add a class of ‘align-self-center’ and change the CSS to get rid of these rules:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/db8d6b122e68b4253efa2ab17eab30bab847ec68.png)  
I think that will accomplish what you want.  
Let me know,  
Bob

---

<div class="post-metadata">

### Author: ![excede](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@excede](https://forum.pinegrow.com/u/excede)
#### Post date: [October 4, 2020, 9:17am UTC](https://forum.pinegrow.com/t/aligning-a-code-snippet-in-the-grid/4576/3 "2020-10-04T09:17:52Z")

</div>

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