# Horizontal Nav Bar - Item spacing

**URL:** <https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 8, 2024, 8:20pm UTC](https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944 "2024-01-08T20:20:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![HelloWorld](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@HelloWorld](https://forum.inductiveautomation.com/u/HelloWorld)\
**Post date:** [January 8, 2024, 8:20pm UTC](https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944/1 "2024-01-08T20:20:07Z")

</div>

How can I space out the items on the horizontal nav bar - is there a way to space them out evenly in the middle of the nav bar?

 ![Screenshot (46)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/6552991c5a3ec77580cea101aa7bcbb8f30910e1.jpeg)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 8, 2024, 8:31pm UTC](https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944/2 "2024-01-08T20:31:04Z")

</div>

There probably is with a CSS trick, but you probably shouldn't. All popular GUIs have menus left justified and this is where users expect them (and why the component defaults to that setup). Doing anything else just causes cognitive dissonance in your users (as does the overwhelming background on your screengrab).

---

<div class="post-metadata">

**Author:** ![HelloWorld](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@HelloWorld](https://forum.inductiveautomation.com/u/HelloWorld)\
**Post date:** [January 8, 2024, 8:35pm UTC](https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944/3 "2024-01-08T20:35:26Z")

</div>

I feel as if that causes cognitive dissonance is just opinion. In my opinion I like it, its engaging, and nothing seems to be overwhelming.

---

<div class="post-metadata">

**Author:** ![Ryan\_Ahlstrom](https://avatars.discourse-cdn.com/v4/letter/r/ecb155/32.png) [@Ryan\_Ahlstrom](https://forum.inductiveautomation.com/u/Ryan_Ahlstrom)\
**Post date:** [January 8, 2024, 9:11pm UTC](https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944/4 "2024-01-08T21:11:41Z")

</div>

You can play around with padding or margins on the itemStyle properties.  
Ex: paddingLeft: 10% and paddingRight: 10%  
These percentages can change depending on how many menu options you have.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 8, 2024, 9:26pm UTC](https://forum.inductiveautomation.com/t/horizontal-nav-bar-item-spacing/83944/5 "2024-01-08T21:26:02Z")

</div>

If you're using 8.1.22 or newer, you can control this while making use of the `stylesheet.css` resource.

I applied the two following rules to my stylesheet:

```css
#centered {
	justify-content: center;
}

#space-around {
	justify-content: space-around;
}

```

These two rules target two Horizontal Menu components with `meta.domId` values of "centered" and "space-around".

This is how they appear in a session (centered on the BOTTOM, and space-around on TOP).

 ![Screenshot 2024-01-08 at 1.24.25 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0de5fc16b2828972ad2436c9d3670a81a2ffe66.png)

Please note that these two examples have relatively few items, and it is unclear how the left/right scrolling options will work with these settings in place as the rules would also be applied to those proprietary scrollers.