Adding custom css

Padma20 · ‎06-26-2024

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_uVGto5P1vL1qTFPYvSHkmihVLkc5Z5...');

}

how to solve this error

Dan-From-Ryviu · ‎06-26-2024

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

You can wrap this code into <style></style> and add it to your theme.liquid file after <head>

So the code like this

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

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

webwondersco · ‎06-26-2024

@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...');

}

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip ☕ would be greatly appreciated. :)..! Instagram

Padma20 · ‎06-27-2024

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.

webwondersco · ‎06-27-2024

@Padma20 Could you please share your store URL?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip ☕ would be greatly appreciated. :)..! Instagram

Adding custom css

Adding custom css

Community Blog Articles