Menu Spacing Help

Store Design
1

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?

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!

2

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

LizHoang_0-1740044330261.png
LizHoang_0-1740044330261.png1101×204 107 KB

Best,

Liz

3

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

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

4

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)