# space between menu items

**URL:** <https://community.hubspot.com/t/space-between-menu-items/119820>\
**Category:** CMS Development\
**Tags:** design-manager, free\
**Created:** [November 5, 2024, 10:28am UTC](https://community.hubspot.com/t/space-between-menu-items/119820 "2024-11-05T10:28:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![KAlfredsson](https://avatars.discourse-cdn.com/v4/letter/k/e9a140/32.png) [@KAlfredsson](https://community.hubspot.com/u/KAlfredsson)\
**Post date:** [November 5, 2024, 10:28am UTC](https://community.hubspot.com/t/space-between-menu-items/119820/1 "2024-11-05T10:28:03Z")

</div>

I am trying to create a simple menu  
just use the system nothing fancy  
I have created my navigation but all the menu object names end up lumped together? why are there no spaces between them? There are no settings for this?  
I shouldnt have to code this?

 ![KAlfredsson_0-1730802321172.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/3/d34486b52d1f714c6ecc3781fa682c3fde8cc9b2.png)

 ![KAlfredsson_1-1730802354647.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/9/397f04bf23a22761c9cd82db4e7d9e0dd3d0f77d.png)

---

<div class="post-metadata">

**Author:** ![GiantFocal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/giantfocal/32/41969_2.png) [@GiantFocal](https://community.hubspot.com/u/GiantFocal)\
**Post date:** [November 6, 2024, 4:35am UTC](https://community.hubspot.com/t/space-between-menu-items/119820/2 "2024-11-06T04:35:16Z")

</div>

Hi @KAlfredsson,

To clarify, what theme do you use? Do you use the theme’s menu module or HubSpot’s built-in Simple/Advanced menu?

HubSpot’s built-in menu doesn’t have any CSS styling added, so you’ll need to style it on your own.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [November 6, 2024, 11:09am UTC](https://community.hubspot.com/t/space-between-menu-items/119820/3 "2024-11-06T11:09:40Z")

</div>

Hi @KAlfredsson,

you’ll need to apply some CSS rules.

If you’re just getting started, maybe with your own theme, a code like this should give you a good starting point but you’ll need to modify it to your requirements

```lia-code-sample
.hs-menu-wrapper ul{
 display:flex;
 flex-direction:column;
 gap: 1.5rem {# This is the spacing between each element. 1rem = your base font size; most likely 16px #}
}

@media screen and (min-width:1024px){
 .hs-menu-wrapper ul{
 flex-direction:row;
 }
}

```

Independent of your theme setup I recommend you to put this code in a (global) CSS file and import this file in the main.css of your theme.

best,

Anton