space between 2 menu items

Store Design

Topic summary

A user is attempting to add spacing between two specific menu items in their Shopify store header using the Broadcast theme. Their previous CSS code targeting the 10th menu item with padding-left stopped working.

Problem Details:

  • Goal: Separate the last two menu items from the rest of the navigation
  • Site: thebodyshop.se (theme not yet live)
  • Previous CSS selector no longer functioning

Solution Provided:
A community member offered CSS code to be added to theme.css or base.css:

  • Targets the 9th menu item with margin-right: 225px
  • Includes media query for screens 990px and wider
  • Also adjusts text alignment and link colors

Visual Context:
Images were shared showing the desired spacing effect between menu items in the header navigation.

The solution appears to address the issue, though no confirmation of successful implementation was posted.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I am trying to add space between 2 menu items

like this

TBS2023_0-1748850547954.png
TBS2023_0-1748850547954.png1752×437 30.3 KB

i was using this code - but suddenly it is no longer working

#shopify-section-sections–25432121672011__header > div.header__wrapper > header > div > div.header__desktop > div.header__desktop__lower > div > nav > hover-disclosure:nth-child(10) > a > span

{
padding-left: 300px !important;
}

please help

my theme is not live yet but using the broadcast theme on www.thebodyshop.se

1 Like
2

Hey @TBS2023

I don’t see these 2 menus on your website, can you first add them?

Best,

Moeed

3

Hi @TBS2023

You want the last 2 items menu separate like this, right?

BiDealDiscount_0-1748853720541.png
BiDealDiscount_0-1748853720541.png1683×377 96.5 KB

4

yes exactly

5

Hi @TBS2023

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
li.site-nav__item.site-nav__expanded-item a.site-nav__link.site-nav__link--underline {
    color: #004236 !important;
}
@media(min-width:990px){
.text-center {
    text-align: left !important;

}
li.site-nav__item.site-nav__expanded-item:nth-child(9) {
    margin-right: 225px !important;
}
}

Result:

websensepro_0-1748868298100.png
websensepro_0-1748868298100.png1358×645 251 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!