How can I adjust the menu item background for mobile view?

Store Design
, , ,

Topic summary

A user needs help adjusting the background styling of a “SALE” menu item that displays correctly on desktop but extends too wide on mobile view. They want the background to fit tightly around the text only.

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add CSS code targeting the mobile menu item width

Refinement:
The initial solution affected all menu items. A more specific CSS snippet was provided to target only the “SALE” link using an attribute selector (a[href="/collections/sales/"]) with a max-width of 110px applied within a media query for screens up to 989px wide.

The discussion appears resolved with a targeted CSS solution that addresses the mobile-specific styling issue without impacting other menu elements.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi, as you can see on my website, I have background on the “SALE” in the header menu and everything is good about it, but on mobile it looks like this. And I would like to have the background just around the text. Could you please help me with it? Thanks. www.luxur-looks.myshopify.com pass:luxurlooks

noapaxx_0-1677673800388.png
noapaxx_0-1677673800388.png575×327 2.29 KB

2

@noapaxx

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.menu-drawer__menu-item.list-menu__item.link.link--text.focus-inset {
  max-width: min-content;
}
3

Hi, @infoatcodelab7 .

Is there a way to do this just for the “SALE” text? This makes the whole menu narrower and it makes the background if other items look bad. Thanks for responding.

4

@noapaxx

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:989px){
a[href="/collections/sale"] {
  max-width: 110px;
} 
}