# Centering Navigation bar and Sticky Options

**URL:** <https://forum.pinegrow.com/t/centering-navigation-bar-and-sticky-options/5569>\
**Category:** Questions\
**Created:** [August 25, 2021, 11:33am UTC](https://forum.pinegrow.com/t/centering-navigation-bar-and-sticky-options/5569 "2021-08-25T11:33:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanb](https://avatars.discourse-cdn.com/v4/letter/r/7ba0ec/32.png) [@ryanb](https://forum.pinegrow.com/u/ryanb)\
**Post date:** [August 25, 2021, 11:33am UTC](https://forum.pinegrow.com/t/centering-navigation-bar-and-sticky-options/5569/1 "2021-08-25T11:33:59Z")

</div>

I am trying to make a navigation menu like this.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/59079fdadbb4cfb196059a2c914fe396ae336c1a.jpeg)

I was able to set the width to navbar but I cannot get it to align in the center of the page.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/694734b5ed2ce97d47d054015db7d02b69398603.png)

Are there any built in settings to make a navigation bar sticky? I am trying to get it to resize to a smaller height when sticky.

---

<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:** [August 25, 2021, 1:54pm UTC](https://forum.pinegrow.com/t/centering-navigation-bar-and-sticky-options/5569/2 "2021-08-25T13:54:23Z")

</div>

Hi @ryanb,  
I think you are using Bootstrap 5 based on the class names - might be wrong. To get your navbar to be smaller and centered you can just wrap it in a container and set the containers size. Then add the sticky-top class to the container.  
For changing the size of the navigation I would recommend using JavaScript and an [InteractionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to add a class to the navbar container to change the height.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![Patrick452](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Patrick452](https://forum.pinegrow.com/u/Patrick452)\
**Post date:** [November 10, 2021, 11:25am UTC](https://forum.pinegrow.com/t/centering-navigation-bar-and-sticky-options/5569/3 "2021-11-10T11:25:24Z")

</div>

Thanks for sharing this info this is useful. Keep it up[.](https://www.skylightpaycard.run/)