space between menu items

Developer Support CMS Development
,
1

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
KAlfredsson_0-1730802321172.png2841×421 29.1 KB

KAlfredsson_1-1730802354647.png
KAlfredsson_1-1730802354647.png957×520 56 KB

2

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.

3

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

.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