Menu Spacing Help

[TheCardTable]

Hi guys, I'm wanting to put spaces/ gaps between certain items in my header menu, so that they stand out a bit more or are easier to read - but can't work out how to do it. Can anyone give me the correct CSS coding please?

thecardtable.co.uk

I'm trying to put a gap between:

- "gifts" and "pokemon"

- "board games" and "sales"

- then possibly one or two after that as well

TIA!

[LizHoang · Accepted solution]

Hi @TheCardTable 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (min-width: 990px){
summary#HeaderMenu-gifts {
    border-left: 3px solid !important;
}
summary#HeaderMenu-board-games {
    border-right: 3px solid !important;
}
}

Result 

Best,

Liz

[topnewyork]

Hi @TheCardTable 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
 a#HeaderMenu-sale {
    font-size: 14px !important;
    font-weight: 500 !important;
}
summary.list-menu__item {
    padding-right: 3.7rem !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Promer-Alena]

Try adding this to your theme’s Custom CSS section or inside your theme.css file:.header__menu-item:nth-child(2),
.header__menu-item:nth-child(4) {
margin-right: 20px; /* Adjust spacing as needed */
}
This should create some gaps between Gifts & Pokémon and Board Games & Sales. If you need more control, you can target the exact menu items using their specific classes or IDs (inspect them using your browser’s dev tools)