How to add a red box behind the nav menu 'sale' in the warehouse theme?

Store Design

Topic summary

Goal: add a red box behind the “Sale” item in the Warehouse theme’s navigation on tennisgiant.com; a screenshot shows the desired appearance.

Proposed solution: edit the theme stylesheet.

  • Path: Themes → Edit code → Assets → theme.css, add code at the bottom.
  • CSS provided:
    @media (min-width: 1000px) { .nav-bar__item:nth-child(9) .nav-bar__link { background: red; padding: 10px; } }

Explanation:

  • The media query (min-width: 1000px) applies the change on larger screens (desktop).
  • The nth-child(9) selector targets the ninth navigation item; this assumes “Sale” is the 9th item in the nav.
  • Styles set a red background and 10px padding for that link.

Outcome/status: a single CSS-based fix was suggested; no confirmation from the original poster yet. The screenshot is central to the requested visual result.

Summarized with AI on February 12. AI used: gpt-5.
1

Hi

Pls could u provide the solution to adding a red box behind the nav menu “sale” attached example below

Theme: warehouse

URL: tennisgiant.com

Wanted result:

Screenshot 2022-08-02 at 23.40.26.png
Screenshot 2022-08-02 at 23.40.26.png3300×319 41.6 KB

Cheers

2

HI @chrisjames11
in this case You can try follow this path:
Themes => edit code => asset => theme.css.
and add this code to bottom of the file theme.css

@media(min-width: 1000px){
.nav-bar__item:nth-child(9) .nav-bar__link{
background: red;
padding: 10px;
}
}