Adding custom css

Technical Q&A

Topic summary

A Shopify user wants menu items in the Impact theme’s responsive header to display image icons, and attempted to add a CSS rule that triggers an “invalid CSS” error.

Key issue:

  • The original CSS contains syntax mistakes: a malformed :nth-child selector and a URL formatted like a Markdown link with brackets, which is not valid in CSS. The rule uses a pseudo-element (::before) to inject an icon via background-image.

Constraints noted:

  • Pseudo-elements (::before, ::after) are reportedly not accepted in the theme’s Custom CSS settings, likely due to validation restrictions.

Suggestions provided:

  • Move the CSS into a block in theme.liquid, placed after the , to bypass Custom CSS limitations.
  • Use a corrected selector (e.g., ul li:first-child::before) and a properly formatted URL in url(‘…’).

Latest update:

  • The user says any URL triggers “invalid css/invalid url,” despite the URL being valid, suggesting the validator or setting is rejecting external URLs or pseudo-elements.

Status and next steps:

  • No resolution yet. Helpers requested the store URL to diagnose context-specific restrictions and confirm where the CSS should be applied.
Summarized with AI on December 26. AI used: gpt-5.
1

I am using impact theme in shopify and for header part I want that in responsive design the menu will come with image icon which is not coming now through theme feature. So I am using css to implement it. But after writing the css It is saying that invalid css.

the css that I have written →

ul li:nth-child(1)::before {

content: “”;

background-image: url(‘https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQMZv2eiCuGTkQ3t_uVGto5P1vL1qTFPYvSHkmihVLkc5Z5pcTE’);

}

how to solve this error

2

:before, :after does not accept in Custom CSS of theme settings.

You can wrap this code into and add it to your theme.liquid file after

So the code like this
3

@Padma20 , hope you are doing well.

Could you please share your store URL and section where you want to apply this CSS?

Also, please try this CSS if it will work.

ul li:first-child::before {
content: "";
background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQMZv2eiCuGTkQ3t_uVGto5P1vL1qTFPYvSHkmihVLkc5Z5...');

}
4

I have tried the above css but it does not take any url. After giving any url it is giving error saying invalid css and invalid url. But url is not invalid.

5

@Padma20 Could you please share your store URL?